Member Avatar for sreein1986

Hi,

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

  • 3 Contributors
  • 4 Replies
  • 182 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by rajarajan2017

Recommended Answers

All 4 Replies

Member Avatar for macneato

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 because: n/a
Member Avatar for rajarajan2017

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

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 for rajarajan2017

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, networking, learning, and sharing knowledge.