How to Fix Issues With CSS "z-index" Property Not Working?

If the CSS z-index property is not working for you, you can consider trying the following list of things to troubleshoot/fix some common issues associated with it:

1. Check if z-index Actually Applies to the Element;
2. Validate the z-index Value;
3. Check if Element Is in Same Stacking Context;
4. Check for Overriding Rules.

Checking if z-index Actually Applies to the Element

The z-index property only applies to positioned elements, flex items and grid items. Therefore, you must ensure that the element meets one of the following conditions:

• The element has one of the following positions set:
  • position: relative;
  • position: absolute;
  • position: fixed;
  • position: sticky.
• The element is a flex item, meaning it is a direct child of display: flex or display: inline-flex element;
• The element is a grid item, meaning it is a direct child of display: grid or display: inline-grid element.

If you are using position: sticky, be aware of the browser support and compatibility issues related to it, as it may affect its functionality.

Validating the z-index Value

Make sure that you are using a valid value for the z-index property, i.e. one of the following:

/* keyword value */
z-index: auto;

/* +/- integer values */
z-index: 0;
z-index: 40;
z-index: -1; /* to lower the priority */

/* global values */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: revert-layer;
z-index: unset;

Checking if Element Is in Same Stacking Context

Overlapping elements may not be in the same stacking context, which means they are treated as separate layers and do not interact with each other in terms of stacking order. In such cases, the z-index of their respective parents takes precedence.

For example, consider the following HTML/CSS:

<div id="parent-1">
  <code>z-index: 1</code>
  <div id="child-1"><code>z-index: 3</code></div>
</div>

<div id="parent-2">
  <code>z-index: 2</code>
  <div id="child-2"><code>z-index: auto</code></div>
</div>

#parent-1 {
  width: 300px;
  height: 300px;
  position: absolute;
  z-index: 1;
  background: aqua;
}

#child-1 {
  position: relative;
  z-index: 3;
  background: yellow;
}

#parent-2 {
  width: 200px;
  height: 200px;
  position: relative;
  z-index: 2;
  background: pink;
}

In this example, even though "child-1" has a higher z-index value, it is rendered behind "parent-2" and its children. This happens because when a parent element establishes a new stacking context, the z-index values of its descendants are relative to the parent's stacking order in relation to other layers.

To resolve this issue, you can do any of the following:

• Pull the concerning element out of its stacking context;
• Put overlapping elements in the same stacking context;
• Adjust the z-index of the parent element to achieve the desired effect.

Checking for Overriding Rules

You can make sure that the element you are applying the z-index property to is not being overridden by a more specific selector.

For example, consider the following HTML/CSS:

<div id="parent">
  <div id="child-1">Foo</div>
  <div id="child-2">Bar</div>
</div>

#child-1 {
  /* ... */
  z-index: 5;
}

It could be the case, for example, that another CSS selector with higher specificity is overriding your selector and the CSS style rules on the element, such as the following:

#parent #child-1 {
  z-index: 2;
}

To fix this, you can do either of the following:

• Remove the more specific selector, or;
• Make your selector more specific than the other one.