Bir HTML Metni Bloğunun Başka Birinin Önünde Görünmesi

HTML div kapları, iş web sitenizdeki Web sayfalarına ilginç özel efektler eklemenizi sağlar. Cam levhalar gibi davranan bölmeler, metin nesneleri gibi diğer HTML öğelerini tutabilir. Z-index adındaki bir CSS özelliği, divs'in üst üste yığıldığında göründüğü sırayı belirler. Bir div'nin z-index özelliğini değiştirerek, div'in sırasını yığında da değiştirebilirsiniz. Bu bilgiyle donanmış olarak, bir div'deki metnin, z-index değerini değiştirerek bir div'deki metnin önünde görünmesini sağlayabilirsiniz.

1.

HTML belgenizi açın ve aşağıdaki kodu belgenin bölümüne ekleyin:

Bir başlık

İki başlık

Bu kod, div1 ve div2 id değerlerine sahip iki div kabı oluşturur. Div1 kabı, "Başlık 1" yazan bir başlığı tutar. İkinci div başlığı "Başlık 2" yi okudu. Bu iki div, kimliği "ana" olan bir ana div içinde oturuyor.

2.

Önceki adımda listelenen koddan sonra aşağıda gösterilen kodu ekleyin:

Bu kod changeZindex JavaScript işlevini oluşturur. Bu işlev, tıklatmanın geçtiği dört parametreyi kabul eder ve div1 ve div2'nin z dizini değerlerini işleve iletilen değerlerle değiştirir. Düğme tıklaması div1'in değeri olarak -1 ve div2'nin değeri olarak 1'i geçtiğinden, kod çalıştığında div2'nin div1'in üstünde görünmesini sağlar.

3.

Aşağıdaki CSS kodunu belgenin bölümüne yapıştırın:

ana {

konum: göreceli; z-endeksi: 1; yükseklik: 400px; en: 400 piksel;

arkaplan rengi: Mavi; }

div1 {

konum: mutlak; z-endeksi: 1; yükseklik: 80px; en: 200px;

pozisyon: göreceli;

arkaplan rengi: Sarı; }

div2 {

z-endeksi: -1;

pozisyon: mutlak;

yükseklik: 80px; genişlik: 200px;

üst: 20px;

sol: 20 piksel;

arkaplan rengi: Yeşil;

}

Bu kod, Web sayfasındaki üç divs için görünüm, konum ve z-index niteliklerini tanımlar. #Main seçici, diğer iki div'in üzerinde durduğu geniş mavi bir arka plan oluşturur. # Div1 ve # div2 seçicileri, değerleri "mutlak" olan konum niteliklerine sahiptir. Bu, iki div'i, onları ana div içinde istediğiniz yere konumlandırmanızı sağlar. # Div1 seçicisi, değeri "Sarı" olan bir arka plan rengi özniteliğine ve # div2 seçicisinin arka plan rengi özniteliği değeri "Yeşil" dir. # Div2 seçicinin z dizini değeri -1 olduğundan, # div2 z dizini değeri 1 olan div2'nin arkasında bulunur. Z dizini değeri daha yüksek olan öğeler her zaman daha düşük değerleri olanların önünde görünür.

4.

Son adımda listelenen koddan sonra aşağıdaki kodu ekleyin:

Bu kod changeZindex JavaScript işlevini oluşturur. Bu işlev, tıklatmanın geçtiği dört parametreyi kabul eder ve div1 ve div2'nin z dizini değerlerini işleve iletilen değerlerle değiştirir. Düğme tıklaması, div1'in değeri için -1 ve div2'nin değeri için -1 değerini geçtiğinden, kodun div2'nin div1'in üzerinde görünmesini sağlar.

5.

Belgenizi kaydedin ve bir tarayıcıda görüntüleyin. Metni "Başlık 1" olan sarı div1'i, metni "Başlık 2" olan yeşil div'in üstüne oturduğunu göreceksiniz. Div2'nin div1'in üzerinde görünmesini sağlamak için düğmeye tıklayın.

İpuçları

  • Bu örnek, farklı div kaplarını tanımlamayı kolaylaştırmak için arka plan renklerini kullanır. Renklerden kurtulmak istiyorsanız arka plan rengi özniteliklerini CSS tanımlarından kaldırabilirsiniz.
  • Bu örnek, div konteynerlerinin içeriği olarak başlıklar kullanmasına rağmen, divlere istediğiniz herhangi bir metin öğesini yerleştirebilir ve genişlik ve yükseklik CSS değerlerini istediğiniz bir şeye ayarlayabilirsiniz.

Tavsiye