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.