Öneri ve Hata Raporu



Günün Sözü Asla yalnız yürümeyeceksin

kategori CSS
oylama 3.1/5 yorum 0 yorum yazar Hakan Taşan tarih 22 Kasım 2013

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> 

 

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

Bu makale için yorum yazılmamış