CSS z-index özelliği, bir HTML elementinin ekran üzerinde öncelikli olarak hangi katmandaki olduğunu belirler. Özellik, bir sayı değeri alır ve varsayılan değeri auto dur.

Örneğin, aşağıdaki CSS kodu, bir div elementinin z-index değerini 5 olarak ayarlar..

div {
  position: absolute;
  z-index: 5;
}

Bu örnekte, div elementi z-index değeri 5 olduğu için, diğer elementler arasında en üstte yer alacaktır. Özellikle birden fazla elementin üzerine yerleştirilmiş olduğu durumlarda, z-index özelliği ile hangi elementin öncelikli olarak görüneceği belirlenir.

Aşağıdaki örneği inceleyelim...

.element1 {
  position: absolute;
  z-index: 2;
}
.element2 {
  position: absolute;
  z-index: 5;
}

Bu örnekte, element2 sınıfının z-index değeri 5 olduğu için, element1 sınıfından üstte yer alacaktır.

Bu özellik, genellikle ekran üzerinde öncelikli olarak hangi elementin görüneceğini belirlemek için kullanılır. Örneğin, bir web sayfasında üstüne yerleştirilmiş modal pencereler gibi, z-index özelliği ile hangi elementin öncelikli olarak görüneceği belirlenir.

• Not: z-index özelliği position özelliği absolute, relative, fixed veya sticky olan elementlerde kullanılır.