Kutu-Nesneleri Üst Üste Yerleştirme

Z-index Kullanımı

Nesne veya kutuları (div'leri) üst üste yerleştirmek için öncelikle position özellikleri absolute ya da fixed yapılmalıdır. Ardından left - right - top - bottom özelliklerinden gerekli olanlar kullanılarak tam konumları ayarlanmalıdır.

Kutular üst üste yerleştiklerinde varsayılan olarak en son yazılan en üstte görünecektir. Bu durum z-index özelliği ile değiştirilebilir. Üst üste yerleşen nesnelerin her birine z-index özelliği ile bir numara verilir ve en üstte görünmesi istenen elemanın z-index değeri en yüksek yapılır. 

Örneğin altta 3 farklı kutu için stil oluşturulmuş, bu kutuların üst üste gelmeleri sağlanmış ve hangisinin en üstte, hangisinin en altta görüneceği ayarlanmıştır.Kutu3 en üstte, kutu2 ise en altta görünecektir.

#kutu1 {

position:absolute;

z-index:2;

top:50px;

left:100px;

}

#kutu2 {

position:absolute;

z-index:1;

top:50px;

left:100px;

}

#kutu3 {

position:absolute;

z-index:3;

top:50px;

left:100px;

}

 

css kutu z index ne işe yarar, divleri kutuları üst üste yerleştirme, div sırasını değiştirme, hangisinin üstte görüneceğini belirleme

KONU İLE İLGİLİ ÖRNEKLER

Div - Kutuları Üst Üste Yerleştirme Kendin Dene

z-index değeri ile hangi kutunun daha üstte olacağı belirlenebilir. Kendini dene butonuna tıklayarak kodlar üzerinde değişiklik yapabilir ve sonucu görebilirsin.

 



YORUMLAR




26727  kez okundu.

Online Kullanıcı Sayısı 170



Kutu-Nesneleri-Üst-Üste-Yerleştirme