CSS Kutuların Öne veya Arkaya Taşınması

CSS'de z-ekseninde kutuların öne veya arkaya taşınması, z-index özelliği ile kontrol edilir. Bu özellik, öğelerin diğer öğelerin üzerinde veya altında görüntülenme sırasını belirler. Daha yüksek bir z-index değeri, öğeyi daha öne getirir.

İşte z-index kullanımı:

div {
  z-index: 1; /* Öğenin z-index değeri, örneğin 1 */
}

span {
  z-index: 2; /* Öğenin z-index değeri, örneğin 2 */
}

Bu örnekte, div ve span öğelerinin z-index değerleri farklıdır. z-index değeri büyük olan öğe, daha önce gelecektir.

Ayrıca, position özelliğinin değeri relative, absolute, veya fixed olan öğeler üzerinde z-index kullanabilirsiniz. static değerine sahip öğeler üzerinde z-index özelliği etkili olmaz.

.container {
  position: relative;
}

.box1 {
  position: absolute;
  z-index: 2;
}

.box2 {
  position: absolute;
  z-index: 1;
}

Bu örnekte, .box1 ve .box2 öğeleri .container içinde position: absolute; ile konumlandırılmıştır. z-index değerleri farklı olduğundan, .box1 öğesi daha önde olacaktır.