Div ile z-index Örneği – CSS

Div ile z-index Örneği – CSS

HTML Kısmı;

[code lang=”html”]
<div id="anadiv">
<div id="kutu1"></div>
<div id="kutu2"></div>
<div id="kutu3"></div>
<div id="kutu4"></div>
<div id="kutu5"></div>
</div>

[/code]

CSS Kısmı;

[code lang=”css”]
#anadiv
{
width:651px;
border:hidden;
margin:1px;
}

#kutu1
{
width:650px;
height:650px;
background-color:#39C;
position:absolute;
z-index:1;
}

#kutu2
{
width:500px;
height:500px;
background-color:#C00;
position:absolute;
z-index:2;
left:75px;
top:75px;
}

#kutu3
{
width:350px;
height:350px;
background-color:#9C0;
position:absolute;
z-index:3;
left:150px;
top:150px;
}

#kutu4
{
width:150px;
height:150px;
background-color:#60F;
position:absolute;
z-index:4;
left:250px;
top:250px;
}

#kutu5
{
width:30px;
height:30px;
background-color:#F30;
position:absolute;
z-index:5;
left:310px;
top:310px;
}

[/code]