Css z-index elementi nedir ? nasıl kullanılır ?

Css kodlarımızda bu zaman kadar hep yanyana alt alta sıraladık ama günümüz tasarımlarında bu sıralamalar bizlere yetmemeye başladı ve artık dinamik bir resim gölgesi yapıyorsak bile bu gölge div’ini z-index ile resimin üstüne yerleştiriyoruz ve resim ne kadar değişirse değişisin bizim belirlediğimiz gölgeli z-index div’i altında çıkıyor.

Açıkcası z-index z ekseninde yani üst üste,  alt alta divleri yerleştirmemizi sağlıyor ancak z-index’i kullanabilmemiz için öncelikle  position özelliği vermemiz lazım yoksa z-index değeri çalışmayacaktır. Hemen örneklere geçelim.

Şimdi bir cerceve div’i içinde kutuBir ve kutuIki diye kutucuklar oluşturup birini sola biri sağla yaslayalım.

Css kodları :

Html kodları:

Şimdi kutucuklarımızdan  z-index değerini vermeden önce z-index değerinim çalışması için position:absolute; ve kafamıza göre top ve left komutlarını vereceğiz.

Css kodları :

Görmüş olduğumuz üzere position absolute değerini verdik ve divler üst üste çıktı ama bizim amacımız katmanları yönetmek o yüzden şimdi z-index değerini vereceğiz. (Eğer position komutlarını anlayamadıysanız bu konudan komutları inceleyebilirsiniz)

Şimdi ise son nokta yani z-index elementini kullanma safasına geldik tabi buraya kadar biraz sıkıcı oldu ama makalenin her seviyeye hitap etmesi için temelden anlatmak zorundayım.

z-index;

z-index değeri kullanımı direk sayısal rakamlar ile belirtilir yani z-index:2; gibi bizde hemen üste çıkartmak istediğimiz kutucuklara sayısal büyüklüklere göre z-index değeri verelim.

Css kodları :

Burada görüldüğü üzere kutuIki class’ına z-indez:1; ve kutuBir class’ına da z-index:2; dedik yani kutuBir’i kutuIki’nin üzerine çıkart diye belirttik. z-index elementinin özellikleri bukadardır arkadaşlar aşağıda z-index komutunu kullandığım web sitelerinden resim koydum ki z-index’in bizler için ne kadar önemli olduğunu görün diye.