CSS Z-index Kullanımı: Öğelerin Yığılma Bağlamını Yönetme

Sözdizimi

z-index özelliği, bir öğenin yığılma sırasını belirlemek için bir tamsayı değeri alır.

element {
  position: ; /* required */
  z-index:  | auto;
}

z-index özelliğinin doğru şekilde çalışabilmesi için, hedef öğenin mutlaka position özelliği değerinin static dışında (yani relative, absolute, fixed veya sticky) bir değere sahip olması gerekir. Aksi takdirde, z-index'in hiçbir etkisi olmayacaktır.

Değerler aşağıdaki gibidir:

• : Bu, öğenin yığılma bağlamı içindeki dikey sırasını belirleyen bir tamsayıdır. Daha yüksek bir değer, öğenin diğerlerine göre daha önde görünmesini sağlar. Negatif değerler de kullanılabilir ve bu durumda öğe, varsayılan akıştaki öğelerin arkasına yerleşebilir. Örnek: 1, 100, -5.

• auto: Bu, öğenin yığılma sırasının ebeveyninin yığılma sırasıyla aynı olmasını sağlar. Bu, varsayılan değerdir ve yeni bir yığılma bağlamı oluşturmaz.

Örnekler

Aşağıdaki örnek, çakışan iki kutunun z-index kullanılarak nasıl sıralandığını göstermektedir. Kutulardan biri diğerinin üzerinde görünecektir.

  
Kutu 1
  
Kutu 2

Yukarıdaki örnekte, .box2 sınıfına sahip öğe, z-index: 2; değeri sayesinde .box1 sınıfına sahip öğenin (z-index: 1;) üzerinde görüntülenecektir. Eğer z-index değerleri eşit olsaydı veya hiç belirtilmeseydi, HTML yapısındaki sıraya göre daha sonra gelen öğe daha üstte olurdu.

Negatif z-index kullanımı ile bir öğeyi diğer öğelerin veya arka planın arkasına yerleştirmek mümkündür. Bu, özellikle sabit başlıkların veya menülerin içeriğin arkasına geçmesi istenen durumlarda faydalıdır.

  
Sabit Başlık (Z-index: -1)
  

    
Bu içerik, başlığın üzerinde görünecektir.
    

      
Bu kutu, başlığın üzerinde ve içeriğin içinde.
    
    
Aşağı kaydırarak başlığın içeriğin arkasına geçtiğini görebilirsiniz.
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  

Önemli Notlar

• position Gerekliliği: z-index özelliği yalnızca position değeri static olmayan (relative, absolute, fixed veya sticky) öğeler üzerinde etkilidir.

• Yığılma Bağlamı (Stacking Context): Her z-index değeri, bir yığılma bağlamı içinde değerlendirilir. Bir öğe yeni bir yığılma bağlamı oluşturduğunda, onun içindeki tüm alt öğeler, ebeveynlerinin z-index değeri tarafından belirlenen o bağlam içinde sıralanır. Ebeveynin z-index değeri, alt öğelerin kendi aralarındaki sıralamadan önce gelir.

• Yeni Yığılma Bağlamı Oluşturan Durumlar: position değeri static olmayan ve z-index değeri auto dışında olan öğeler yeni bir yığılma bağlamı oluşturur. Ayrıca, opacity değeri 1'den küçük olan, transform, filter, perspective gibi belirli CSS özelliklerini içeren öğeler de yeni yığılma bağlamları oluşturabilir.

• Sıra Belirleme: Aynı yığılma bağlamında ve aynı z-index değerine sahip iki öğe arasında, HTML belgesinde daha sonra tanımlanan öğe görsel olarak daha üstte görünür.

• Negatif Değerler: Negatif z-index değerleri, bir öğeyi genellikle varsayılan akıştaki öğelerin arkasına, hatta bazen body veya html arka planının arkasına bile yerleştirebilir. Ancak bu, tarayıcı ve diğer stillere bağlı olarak dikkatle kullanılmalıdır.