Web sayfaları oluştururken, sürükleyici, zengin tasarımlar ve arayüzler oluşturmak için genellikle farklı öğeleri üst üste yerleştirmek isteriz. Ancak, iki öğe üst üste binerse, hangisinin üstte olduğunu nasıl kontrol edersiniz?
Web tasarımındaki birçok şeyde olduğu gibi, cevap CSS’de, özellikle de z-index özelliğindedir. Z-index özelliği, bir web sayfasındaki öğelerin yığın sırasını kontrol etmenize izin verdiği için CSS’deki en önemli özelliklerden biridir.
Bu gönderide, z-endeksi özelliğinin CSS’de ne anlama geldiğini, nasıl kullanılacağını ve projelerinizde bundan en iyi şekilde yararlanmanızı sağlayacak bazı ipuçlarını tartışacağız. Başlayalım.
Önerilen makale: sosyal medya nasıl ortaya çıktı hakkında bilgi almak ve güncel sosyal medya haberlerine ulaşmak için ilgili sayfayı ziyaret edebilirsiniz.
Özellik, z ekseni boyunca öğelerin sırasını ayarladığı için “z-endeksi” olarak adlandırılır. X ekseni soldan sağa ve y ekseni yukarıdan aşağıya gidiyorsa, z ekseni kullanıcıya “doğru” ve “uzak” boyutlarını ekler. Z-endeksi değeri daha yüksek olan öğeler kullanıcıya daha yakın görünür ve daha düşük değerli öğeler daha uzakta görünür.
İki sayfa öğesi çakışırsa ve hiçbir z-endeksi değeri verilmezse (veya her iki öğe de aynı z-index değerine sahipse), HTML kodunda en son yerleştirilen öğe, kodda kendisinden önce yerleştirilen öğenin üstünde görünür. Ayrıca, bir konum değeri (varsayılan değer olan statik dışında) verilen öğeler, yığında konumu olmayan öğelerin üzerinde görünür.
Z-endeksi özelliği hakkında daha fazla bilgi için aşağıdaki videoyu izleyin.
HubSpot Videosu
z-endeksi nasıl kullanılır
z-index özelliği aşağıdaki sözdizimini kullanır:
z-index özelliği bir tamsayı değeri alır. Tamsayı ne kadar yüksek olursa, öğe yığın sıralamasında o kadar yüksek olacaktır. Örneğin, z indeksi 0 ve 1 olan iki elemanınız varsa, z indeksi 1 olan eleman, z indeksi 0 olan elemanın önünde olacaktır.
z-index, öğenin yığın düzeyini varsayılan değer olan 0’a ayarlayan auto değerini de alabilir.
Bir örneğe bakalım. İlk olarak, z-index özelliği olmayan dört div öğesinden oluşan bir yığın:
Gördüğünüz gibi, yığınlamanın sırası, HTML kodundaki div’lerin sırasına göre belirlenir. Her div, önündeki div’in üstüne yerleştirilir.
Şimdi, bu sıralamayı tersine çevirmek için z-endeksini kullanalım:
Bu örnekte, varsayılan yığınlamayı geçersiz kılmak için z-index kullanıyoruz. Şimdi, ilk yazılan div (“ilk”) yığının en üstündedir.
Bu örneklerde div’lere ayrıca bir konum değeri verildiğine dikkat edin. z-index özelliğine sahip bir öğeyi kontrol etmek için, öğenin konum için statik olmayan (varsayılan) bir değere sahip olması gerekir. z-index, konumu göreli, sabit, mutlak veya yapışkan olan öğelere uygulanacaktır. CSS konumu özelliğinin nasıl çalıştığı hakkında daha fazla bilgi edinmek için CSS konumuna giriş kılavuzumuza bakın.
z-index, -1 gibi negatif tamsayı değerleri de alabilir. Sayfa öğeleri için varsayılan z dizini değeri 0 olduğundan, negatif z dizini değerine sahip öğeler, ayarlanmış bir z dizini değeri olmayan öğelerin arkasında görünür.
z-endeksi Yığınlama Bağlamı
Z-endeksini kullanırken, işler biraz daha karmaşık hale geldiğinden, kümelemenin iç içe öğelerde nasıl etkilendiğini dikkate almak da önemlidir.
Bir z-endeksi değeri, bir öğeyi aynı yığınlama bağlamındaki diğer öğelere göre z ekseni üzerinde konumlandırır. Yığınlama bağlamı, aynı üst öğeyi paylaşan ve z-endeksi değerleri birbiriyle karşılaştırılan bir grup öğedir.
Yukarıdaki örneklerde, tüm div’ler aynı yığın bağlamındaydı ve <body> öğesinin doğrudan alt öğeleriydi. İşte birden çok yığın bağlamı içeren başka bir örnek:
Bu örnekte, her biri iki alt öğeye sahip iki konteyner div’imiz (siyah kenarlarla işaretlenmiş) var. Bu konteynerlerin her birinin kendi yığınlama bağlamı vardır.
Container-2’yi alıp container-1’in altına taşırsak, bu yığın bağlamlarının nasıl davrandığını görebiliriz:
Burada div 1’in div 4’ten daha yüksek bir z-endeksi değerine sahip olmasına rağmen div 4’ün div 1’in önünde olduğuna dikkat edin.
Bunun nedeni, konteyner-2’nin kendisinin konteyner-1’den daha yüksek bir z indeksine sahip olmasıdır. Bu nedenle, kap-2 içindeki tüm alt öğeler, z-endeksi değerleri ne olursa olsun, kap-1 içindeki tüm alt öğelerin önüne oturacaktır. Z-endeksi değerleri, yalnızca aynı kaptaki (yani, aynı yığınlama bağlamındaki) diğer öğelere göre konumu belirler.
Öğe yığınınızı z-index ile kontrol edin.
Doğru kullanıldığında z-index özelliği, öğelerinizi doğru şekilde sıralamak için güçlü ancak anlaşılması kolay bir araçtır ve CSS veya Bootstrap CSS öğrenen herkes için bir zorunluluktur. Katmanlar arasında kaybolmamak için z-endeksi değerlerinizi düzenli tuttuğunuzdan emin olun!
Pazarlama Satış 