Hi,

I dont know what is the Z-index?
Can you explain with an example,

Recommended Answers

All 4 Replies

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

Member Avatar

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>
commented: Excellent Example! +1

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>
Member Avatar

Welcome! Please mark as solved if it is solved!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.