z-index nedir ve web geliştirmede nasıl kullanılır?

z-index — CSS özelliği, öğelerin Z eksenindeki konumlarına göre yığılma sırasını belirler. Daha büyük z-index değerine sahip öğeler, daha küçük değerlere sahip öğelerin üzerinde gösterilir.

Pozisyonlandırma ile yığılma derinliğini yönetmek için kullanılır (yani, position özelliği static dışındaki değerler alan öğeler): relative, absolute, fixed, sticky.

Kullanımın temel noktaları:

• Statik konumlandırmaya sahip öğeler (position: static;) yığılma bağlamına katılmaz ve z-index'i dikkate almaz.
• z-index değeri, yeni bir yığılma bağlamı oluşturan öğelere uygulanır. Bu bağlam, örneğin, position değeri static olmayan kullanımlar veya diğer CSS kuralları (örneğin, opacity < 1) ile oluşturulur.
• Aynı yığılma bağlamında, daha yüksek z-index değerine sahip öğeler üstte yer alır.
• İç içe yığılma bağlamları, ebeveyn bağlam içinde tek bir bütün olarak yığılır.
• Açıkça z-index belirlenmediğinde, yığılma sırası DOM'daki öğe sırasına göre belirlenir.

Kullanım örneği:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* .box2'nin üzerinde olacak */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* .box1'in altında olacak */
}