z-index
CSS z-index Property
The CSS z-index property is used to layer elements by specifying their z-axis hierarchy number in the stack order of elements. Higher indexes stack on top of lower indexes. The effect is only seen on containers that are positioned in such a way that they overlap or cover one another.
Specify an integer. The higher the number, the higher the layer.
auto
Sets the z-index to '0'
CSS CODE EXAMPLE
<style type="text/css">
#container { border: #999 1px dashed; height: 100px; }
#container div {
position: absolute;
background: #FFD5FF;
border: #F0F 1px solid;
padding: 10px;
text-align: center;
width: 20px;
height: 20px;
}
#div1 {
z-index: 3;
top: 20px;
left: 20px;
}
#div2 {
z-index: 2;
top: 40px;
left: 40px;
}
#div3 {
z-index: 1;
top: 60px;
left: 60px;
}
</style>
<div id="container">
<div id="div1">A</div>
<div id="div2">B</div>
<div id="div3">C</div>
</div>
#container { border: #999 1px dashed; height: 100px; }
#container div {
position: absolute;
background: #FFD5FF;
border: #F0F 1px solid;
padding: 10px;
text-align: center;
width: 20px;
height: 20px;
}
#div1 {
z-index: 3;
top: 20px;
left: 20px;
}
#div2 {
z-index: 2;
top: 40px;
left: 40px;
}
#div3 {
z-index: 1;
top: 60px;
left: 60px;
}
</style>
<div id="container">
<div id="div1">A</div>
<div id="div2">B</div>
<div id="div3">C</div>
</div>
Possible Values:
numberSpecify an integer. The higher the number, the higher the layer.
auto
Sets the z-index to '0'
0 Response to "z-index"
Post a Comment