CSS ile katman ayarlarını z-index kullanarak yapacağız. z-index üst üste gelen elementler arasında hangisinin üstte hangisinin altta görüneceğini ayarlayan bir özelliktir. En az 2 element gerekir. Kısacası üst üste gelen elementlerin sıralamasını belirlemeye yarar. z-index, CSS'nin position özelliğiyle birlikte çalışır (position:absolute, position:relative, position:fixed).
Syntax
z-index:-1;
Kullanımı
z-index:x; olarak kullanılır. x yani katman değeri herhangi bir değer alabilir. Katman değeri diğer elementin katman değerinden yüksekse, diğer elementin üstünde görünür. Aynı şekilde katman değeri diğerinden düşükse diğer elementin altında kalır.
Örnek 1)
Bu örnekte; 2 alan vardır. 2. şekil 1. şeklin üstündedir.
CSS Kodu
#sekil1
{
position:absolute;
height:100px;
width:150px;
background-color:#ff0000;
left:0px;
top:0px;
z-index:-1;
}
#sekil2
{
position:absolute;
height:100px;
width:150px;
background-color:#00ff36;
left:0px;
top:30px;
z-index:1;
}
HTML Kodu
<div id="sekil1">ŞEKİL 1</div>
<div id="sekil2">ŞEKİL 2</div>
Örnek 2)
Bu örnekte; 3 alan vardır. 3. şekil 1. şeklin üstünde, 2. şekil bütün şekillerin üstündedir.
CSS Kodu
#sekil1
{
position:absolute;
height:100px;
width:150px;
background-color:#ff0000;
left:0px;
top:0px;
z-index:-1;
}
#sekil2
{
position:absolute;
height:100px;
width:150px;
background-color:#00ff36;
left:60px;
top:30px;
z-index:1;
}
#sekil3
{
position:absolute;
height:100px;
width:150px;
background-color:#66CCFF;
left:0px;
top:50px;
z-index:0;
}
HTML Kodu
<div id="sekil1">ŞEKİL 1</div>
<div id="sekil2">ŞEKİL 2</div>
<div id="sekil3">ŞEKİL 3</div>
Ana Sayfa
css 
Paylaş
Oyla