3
Contributors
4
Replies
5
Views
8 Years
Discussion Span
Last Post by rajarajan2017
0

It's practically the stacking order of elements. E.g.

You have one div with a z-index of 1 and you got another smaller div with a z-index of 2. The div with the higher z-index will be infront. So in this case, the smaller div will be rendered ontop of the div with a z-index of 1

Edited by macneato: n/a

1

Z- index is nothing but a stacking order. The order of elements to be placed. For that you can set the zindex. An good example is Website menus goes behind flash or images.
Below is the example to clearly identify the purpose of zindex

<html>
<body>    
<div id="myDiv" 
     style="position:absolute; 
            left:100px; 
            top:50px; 
            width:100px; 
            height:50px; 
            z-index:1; 
            background-color:red;">
This div is absolute positioned with an z-index of 1.
</div>
<div style="position:absolute; 
            left:100px; 
            top:50px; 
            z-index:12; 
            height:50; 
            background-color:blue;">
This is a div element with a z-index of 12.
</div>
<button onclick="myDiv.style.zIndex = 20;">
Bring red to front
</button>
</body>
</html>
Votes + Comments
Excellent Example!
0

Hi rajarajan,

Really Thank Q very much,
after ur reply i have tried with some examples

Z- index is nothing but a stacking order. The order of elements to be placed. For that you can set the zindex. An good example is Website menus goes behind flash or images.
Below is the example to clearly identify the purpose of zindex

<html>
<body>    
<div id="myDiv" 
     style="position:absolute; 
            left:100px; 
            top:50px; 
            width:100px; 
            height:50px; 
            z-index:1; 
            background-color:red;">
This div is absolute positioned with an z-index of 1.
</div>
<div style="position:absolute; 
            left:100px; 
            top:50px; 
            z-index:12; 
            height:50; 
            background-color:blue;">
This is a div element with a z-index of 12.
</div>
<button onclick="myDiv.style.zIndex = 20;">
Bring red to front
</button>
</body>
</html>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.