Why does z-index not work?

Question

So if I understand z-index correctly, it would be perfect in this situation:

I want to place the bottom image (the tag/card) below the div above it. So you can't see the sharp edges. How do I do this?

z-index:-1 // on the image tag/card

or

z-index:100 // on the div above

doesn't work either. Neither does a combination of anything like this. How come?

Answer 1

The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).

There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.

Answer 2

If you set position to other value than static but your element's z-index still doesn't seem to work, it may be that some parent element has z-index set.

The stacking contexts have hierarchy, and each stacking context is considered in the stacking order of the parent's stacking context.

So with following html

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }

<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

no matter how big the z-index of el3 will be set, it will always be under el1 because it's parent has lower stacking context. You can imagine stacking order as levels where stacking order of el3 is actually 3.8 which is lower than 5.

If you want to check stacking contexts of parent elements, you can use this:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

There is a great article about stacking contexts on MDN

Answer 3

Your elements need to have a position attribute. (e.g. absolute, relative, fixed) or z-index won't work.

Answer 4

In many cases an element must be positioned for z-index to work.

Indeed, applying position: relative to the elements in the question would likely solve the problem (but there's not enough code provided to know for sure).

Actually, position: fixed, position: absolute and position: sticky will also enable z-index, but those values also change the layout. With position: relative the layout isn't disturbed.

Essentially, as long as the element isn't position: static (the default setting) it is considered positioned and z-index will work.

---

Many answers to "Why isn't z-index working?" questions assert that z-index only works on positioned elements. As of CSS3, this is no longer true.

Elements that are flex items or grid items can use z-index even when position is static.

From the specs:

4.3. Flex Item Z-Ordering

Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

5.4. Z-axis Ordering: the z-index property

The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

Here's a demonstration of z-index working on non-positioned flex items: https://jsfiddle.net/m0wddwxs/

Answer 5

Make sure that this element you would like to control with z-index does not have a parent with z-index property, because element is in a lower stacking context due to its parent’s z-index level.

Here's an example:

<section class="content">            
    <div class="modal"></div>
</section>

<div class="side-tab"></div>

// CSS //
.content {
    position: relative;
    z-index: 1;
}

.modal {
    position: fixed;
    z-index: 100;
}

.side-tab {
    position: fixed;
    z-index: 5;
}

In the example above, the modal has a higher z-index than the content, although the content will appear on top of the modal because "content" is the parent with a z-index property.

Here's an article that explains 4 reasons why z-index might not work: https://coder-coder.com/z-index-isnt-working/

Answer 6

Z-index needs these to work:

1. Position: relative, absolute, fixed, ..
2. Make sure that the parent element hasn't overflow: hidden;

Answer 7

I had the same problem with z-index and fixed it by setting the background color like this:

 background-color: white;

Answer 8

If all else fails, look for syntax errors in your HTML. It's not intuitive, but I've seen it be the reason why z-index doesn't work.

The following code has invalid HTML syntax:

<div class="over"/>
<div class="under"/>

...(it's is invalid syntax because a div isn't a self closing tag).

CSS properties that were applied to these rogue HTML elements, such as background-color: black, position: fixed, width: 150px, and top:150px, were all working as expected. However, the z-index: 2 property wasn't working under the exact same conditions.

Only when the invalid HTML was fixed did the z-index work correctly.

I'm not sure why z-index was pickier than the other CSS attributes, but maybe this answer can help someone.

Answer 9

I got my answer from codercoder.com: In my code I have set my Navbar's opacity to 0.9.

Once you remove the opacity property from the Navbar's CSS, the z-index works as expected.

Answer 10

in my case the setting upper element to z-index: -1 helps.