CSS ile aynen photoshoptaki gibi katmanlar (layer) oluşturup bunları istediğimiz gibi kullanalabiliriz. CSS katmanları, z-index özelliğini birbirleriyle örtüşen öğelere uygulamak için kullanılır. Z-index özelliği ile position özelliği bu işelmin tamamlayıcılarıdır. Z-inden ile hangi öğenin üstte olması gerektiğini ve hangi öğenin alt kısımda olması gerektiğini belirtebilirsiniz.
z-index özelliği daha karmaşık web sayfası düzenleri oluşturmanıza yardımcı olabilir.
Aşağıda, CSS'de katmanların nasıl oluşturulacağını gösteren örnek verilmiştir.
<div style = "background-color:blue; width:300px; height:100px; position:relative; top:10px; left:80px; z-index:2"> </div> <div style = "background-color:red; width:300px; height:100px; position:relative; top:-60px; left:35px; z-index:1;"> </div> <div style = "background-color:orange; width:300px; height:100px; position:relative; top:-220px; left:120px; z-index:3;"> </div>
Örnek Çıktısı;
İlk yorumu siz yazın !..