Use of Z-index property in CSS
January 19, 2010 Leave a comment
Z-Index
Its the stack order of element.
Higher the Z-index value of an Element means closer to the top of stack order.
Lets see the example :
I have taken Two DIVs (Div1 and Div2)
<div id="yellowblock"></div> <div id="blueblock"></div>
then I styled it as
<style> #yellowblock { z-index: 1; position: absolute; width:80px; height:100px; top:20px; left:20px; border: 1px solid #FFF; background-color: #f3b02e; } #blueblock { z-index: 2; position: absolute; width:100px; height:80px; top:50px; left:50px; border: 1px solid #FFF; background-color: #02b9cf; } </style>
When I interchange there Z-indexes as:
<style> #yellowblock { z-index: 2; position: absolute; width:80px; height:100px; top:20px; left:20px; border: 1px solid #FFF; background-color: #f3b02e; } #blueblock { z-index: 1; position: absolute; width:100px; height:80px; top:50px; left:50px; border: 1px solid #FFF; background-color: #02b9cf; } </style>
its output is :
The javascript syntax for using Z-index is
document.getElementById("blueblock").style.zIndex = "4";
Some Facts-
z-index
only works on elements that are positioned.
Hope this post will be useful for you.
Please share / recommend if you like this post.
Thanks,
Nikhil Ughade
UI Designer
Mumbai[INDIA]
Comments