Member Avatar for sreein1986

Hi,

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

  • 3 Contributors
  • 4 Replies
  • 192 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

Following 's question: was right that z-index controls stacking order and gave a useful demo. To be precise: z-index sets an element's stack level inside its nearest stacking context. It applies to positioned elements and to flex/grid items; larger integer values render in front, smaller (or negative) push elements back. (developer.mozilla.org)

The part that trips people up is stacking contexts. Once an element creates a stacking context, its children are stacked only inside that context and cannot escape to sit above elements in an ancestor or sibling context. Many CSS properties create stacking contexts — for example position + a non-auto z-index, position: fixed|sticky, opacity < 1, transform, filter, isolation: isolate, contain, and a few others. That is why a child with a very high z-index can still be hidden behind something else. (developer.mozilla.org)

A short example that shows the common gotcha:

<style>
.parent  { position:relative; z-index:1; }
.child   { position:absolute; z-index:999; }
.sibling { position:relative; z-index:2; }
</style>

<div class="parent">
  <div class="child">High inside parent</div>
</div>
<div class="sibling">Sits above the child</div>

Even though .child has z-index:999, it stays behind .sibling because .parent (z-index:1) is in a lower stacking context. To fix this either raise the parent above the sibling, remove the stacking-context-creating property on the ancestor, or move the overlay out of that ancestor (for example append it to body). (developer.mozilla.org)

Quick troubleshooting checklist: 1) Make sure the element is positioned (not static) or is a flex/grid item; 2) Inspect ancestors for transform, opacity, filter, contain, or explicit z-index that create a stacking context; 3) For UI overlays, consider rendering them at top-level (body) instead of deep in the DOM; 4) Adopt a small, consistent z-index scale instead of arbitrarily huge numbers. Helpful walkthroughs and visual tools are available if you want to experiment. (css-tricks.com)

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 Member #334542

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 Member #334542

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.