CSS “z-index” Özelliği Kullanımı
Bu derste, CSS ‘in z-index özelliği ayrıntılı olarak ele alınacaktır. Bu özellik, öğelerin birbirleri üzerinde nasıl sıralandığını belirlemek için son derece önemlidir.
“z-index” Nedir?
CSS z-index özelliği, öğelerin diğer öğeler üzerindeki konumunu belirlemek için kullanılan bir özelliktir. Web sayfasında öğelerin birbiri üzerinde nasıl sıralandığını kontrol eder, yani hangi öğenin diğerinin önünde veya arkasında olacağını belirtir.
Peki neden “a-index” veya “b-index” gibi başka bir şey değil de “z-index” olarak adlandırıyoruz? Aslında bu, matematikteki kartezyen koordinat sisteminin bir yansımasıdır. Bu sistemde, x ve y eksenleri bir düzlemi tanımlar, z ekseni ise bu düzlemi dik olarak keser ve derinliği temsil eder. Görüleceği üzere adlandırmasının ardında yatan olay matematiktir.
Dolayısıyla, z-index özelliği, bu z ekseni boyunca öğelerin sıralamasını kontrol etmemizi sağlar. Yani x ve y eksenleri ile konumlandırma yaparken, z ekseni ile derinlik (yani hangi öğenin diğerinin önünde veya arkasında olduğu) ayarlarız.
Kullanımı oldukça basittir. Öğeye bir z-index değeri atandığında, bu değer öğenin diğer öğelerle karşılaştırıldığında hangi seviyede olması gerektiğini belirtir. Daha yüksek bir z-index değerine sahip öğeler, daha düşük değerlere sahip olanlardan her zaman üstte gösterilir. Örneğin:
See the Pen CSS z-index by 1kodum (@1kodum) on CodePen.
Yukarıdaki örneğimizde, kutu2 daha yüksek bir z-index değerine sahip olduğu için kutu1‘in üstünde gösterilmiştir. Ancak belirtmemiz gereken önemli noktalar var:
HTML’in normal akışında, öğeler belgede sıralandıkları sıra ile yukarıdan aşağıya doğru dizilir. Yani, normalde öğeler alt alta sıralanır ve birbirlerini örtmezler.
Yukarıdaki örneğimizde fark ettiyseniz, öğeler üst üste geldiği için derinliği, yani z-index özelliğini kullanabildik. Ancak, normalde HTML’deki akış, iki boyutlu bir düzlemi temsil eder. Bu normal akışta blok elementleri (örneğin div, h1, p) alt alta sıralandığı için bu düzen içerisinde derinlik, yani üçüncü bir boyut yaratılmaz. Haliyle, z-index özelliği bu gibi durumlarda işe yaramaz. İşte böylesi durumlarda öğeleri normal akıştan çıkarmak ve onlara üçüncü bir boyut kazandırmak için position özelliğini kullanıyoruz. Bu sayede öğeler üst üste gelebilir ve “z-index” ile hangi öğenin en üstte olacağını belirleyebiliriz.
Ayrıca belirtmek isterim ki z-index özelliği, tam sayı değerlerini kabul eder. Öğeler arasında hangisinin en üstte görünmesini istiyorsak ona en yüksek tam sayı değerini veririz. Örneğin, bir öğeyi diğerinin üzerinde göstermek için ona z-index: 10; değerini atayabilir ve diğer öğeye z-index: 5; değerini verebiliriz. Bununla birlikte, z-index negatif değerler de alabilir. Bu, özellikle bir öğeyi diğerlerinin altına almak istediğimizde kullanışlıdır. Örneğin, bir arka plan öğesini en alta almak için z-index: -1; değerini kullanabiliriz. Ancak, unutulmamalıdır ki z-index özelliği sadece position değeri static dışında bir değere ayarlanmış öğeler için etkilidir.
CSS “z-index” ve Ebeveynlik
CSS’te z-index özelliğinin varsayılan değeri auto olarak ayarlamıştır. Böylece öğenin sıralamasını otomatik olarak belirlemek için kullanılır ve bu genellikle ebeveyn öğenin z-ekseni sıralamasına bağlıdır.
CSS’te z-index özelliği, varsayılan olarak auto değerine ayarlıdır. Yani bu demektir ki, öğenin z ekseni boyunca sıralamasının otomatik olarak, çoğunlukla ebeveyn öğenin sıralamasına dayanarak belirlenmektedir. Bir öğeye özgül bir z-index değeri atanmadığında ve bu öğenin position özelliği static dışında bir değer yapıldığında, ilgili öğenin z ekseni sıralaması ebeveyn öğesinin sıralamasına uygun şekilde ayarlanır. Eğer ebeveyn öğenin de bir z-index değeri yoksa, bu durum daha üst seviyedeki bir öğeye spesifik bir z-index değeri atanana kadar sürer. Yani “auto” değeri, öğeler arasındaki sıralamanın otomatik ve kesintisiz bir şekilde gerçekleşmesini sağlar. Aşağıdaki örneği inceleyiniz:
See the Pen CSS z-index örneği by 1kodum (@1kodum) on CodePen.
Örneğimizde bir ana kutu (container) ve bu kutunun içerisinde yer alan çocuk öğeleri görebiliriz. Ana kutunun içinde box1 adında kırmızı bir kutu ve subcontainer adında başka bir kutu bulunmaktadır. box1 için özel bir z-index değeri belirtilmediği için varsayılan olan auto değerini alır.
Subcontainer kutusunun içindeyse iki tane öğe bulunmaktadır: box2 ve box3. box2, mavi renkte ve z-index değeri 1 olarak belirlenmiştir. Bu onun içinde bulunduğu subcontainer içerisinde en üstte olmasını sağlar. Diğer tarafta box3, yeşil renkte olup özel bir z-index değeri atanmamıştır. Bu nedenle otomatik olarak box2‘nin altında yer alır.
Özetle, eğer bir öğenin z-index değeri atanmazsa, bu öğe ebeveyninin z-index değerine bağlı olarak otomatik bir sıralamaya tabi tutulur. Ebeveynin de atanmış bir z-index değeri yoksa, bu otomatik sıralama üst seviye ebeveynlere doğru devam eder. Bu şekilde, z-index‘in auto değeri, öğeler arasında otomatik ve kesintisiz bir sıralama sağlar.
Ancak şunu da belirtmek isterim: Bir ebeveyn öğenin “z-index” değeri ne olursa olsun, o ebeveynin içindeki tüm çocuk öğeler her zaman bu ebeveynin üzerinde görünür. Yani, bir ebeveyn öğenin z-index değeri 10 ve bir çocuk öğenin z-index değeri 5 olsa bile, bu çocuk öğe daima ebeveyninin üzerinde görünecektir. Ancak bu, farklı ebeveynler arasındaki çocuk öğeler için geçerli değildir; bu durumda z-index değerleri arasındaki karşılaştırmalar önem kazanır. Bakınız:
See the Pen CSS z-index örneği 2 by 1kodum (@1kodum) on CodePen.
Yukarıdaki örnekte, iki ebeveyn öğemiz ve bu ebeveynlere ait iki çocuk öğemiz bulunmaktadır. Ebeveyn öğelerden biri “Ebeveyn 1” olarak etiketlenmiştir ve z-index değeri 10 olarak ayarlanmıştır. Bu ebeveyn öğesinin içinde “Çocuk 1” adında bir çocuk öğe bulunmaktadır ve z-index değeri 5 olarak belirlenmiştir.
Burada şu ilginç durumu fark edebilirsiniz: Normal şartlarda z-index değeri 10 olan bir öğe, z-index değeri 5 olan bir öğenin üzerinde görünmelidir. Ancak, “Çocuk 1” ebeveyninin içerisinde olduğu için, ebeveyn öğesinin z-index değerinden bağımsız olarak her zaman onun üzerinde görünecektir.
Diğer yandan, “Ebeveyn 2” adında başka bir ebeveyn öğemiz var ve bu öğenin z-index değeri 15’tir. İçerisindeki “Çocuk 2” adlı öğenin z-index değeri ise 20’dir. Bu durumda, “Çocuk 2” hem kendi ebeveyni “Ebeveyn 2” üzerinde hem de “Ebeveyn 1” üzerinde görünecektir. Çünkü onun z-index değeri tüm öğelerden daha yüksektir.
Bu örnek, CSS z-index özelliği değerlerinin nasıl çalıştığını ve özellikle iç içe geçmiş öğelerde nasıl davrandığını gösterir. Ebeveyn ve çocuk öğeler arasındaki ilişki, z-index’in nasıl çalıştığını anlamak için kritik bir faktördür.