Kodunuzdaki z-dizinini yönetme - mankenler

Mutlak konumlama kullandığınızda, yerlerini tam olarak belirleyebilirsiniz, dolayısıyla bunların üst üste gelmeleri mümkündür. Varsayılan olarak, daha sonra HTML'de açıklanan öğeler, daha önce açıklanan öğelerin üzerine yerleştirilir.

CSS'de işleme derinliği

Bu varsayılan davranışı değiştirmek için z-index adlı özel bir CSS özniteliği kullanabilirsiniz. z - ekseni, bir öğenin izleyiciye ne kadar yakın olduğu anlamına gelir. Bu resim, bunun nasıl çalıştığını göstermektedir.

z-indeksi hangi elemanın kullanıcıya daha yakın görünmesini sağlar.

z-index özniteliği sayısal bir değer gerektirir. Daha yüksek sayılar, öğenin kullanıcıya daha yakın (veya üst) olduğu anlamına gelir. z-dizini için herhangi bir değer, öğeyi varsayılan z-dizini öğelerinden daha yükseğe yerleştirir. Bu, diğer öğelerin üstünde görünmesini istediğiniz öğeleriniz olduğunda (örneğin, diğer metinlerin üst kısmında geçici olarak görünen menüler) çok yararlı olabilir.

z-index efektini gösteren kod:

zindex. html

#blueBox {

arka plan rengi: mavi;

genişlik: 100 piksel;

yükseklik: 100 piksel;

pozisyonu: mutlak;

sol: 0 piksel;

üst: 0px;

marj: 0 piksel;

z-indeksi: 1;

}

#blackBox {

arka plan rengi: siyah;

genişlik: 100 piksel;

yükseklik: 100 piksel;

pozisyonu: mutlak;

sol: 50 piksel;

üst: 50 piksel;

marj: 0 piksel;

}

z-index

ile çalışma Bu koddaki tek değişiklik, z-index özelliğinin eklenmesidir. Z-endeksi değeri ne kadar yüksekse o nesnenin kullanıcıya daha yakın olduğu anlaşılır.

z-index kullanılırken aklınızda bulundurulması gereken birkaç nokta vardır:

• Bir öğe diğerini tamamen gizleyebilir. Şeyleri kesinlikle konumlandırmaya başladığınızda, bir öğe tamamen kaybolduğu için kaybolmuş gibi görünebilir. z-index özelliği, bu durumu kontrol etmek için iyi bir yoldur.
• Olumsuz z-index sorunlu olabilir. z-index değeri pozitif olmalıdır. Negatif değerler desteklense de, bazı tarayıcılar (özellikle eski Firefox sürümleri) bunları iyi ele almaz ve öğenizin kaybolmasına neden olabilir.
• Tüm değerleri bir z-indeksi olarak vermek en iyisidir. Bazı öğeler için z-dizini 'ı tanımlarsanız ve z-dizini ' u diğerleri için tanımsız olarak bırakırsanız, tam olarak ne olacağı konusunda bir garanti veremezsiniz. Şüpheniz varsa, her değere kendi z-indeksi değerini verin; ne neyin üst üste bindirileceğini tam olarak bileceksiniz.
• Aynı z-index öğesine iki öğe vermeyin. z-indeksi noktasının hangi öğenin daha yakın görünmesi gerektiğini açıkça belirlemektir. Bu amaca, aynı z-index değerini aynı sayfada bulunan iki farklı öğeye atayarak yenilgiye uğratmayın.