Why is my z-index not working?

The z-index property define the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Not setting a position: fixed, relative, absolute or sticky for an element.

z-index requires an element’s positioning to be either fixed, relative, sticky or absolute.

Positioning Recap:

HTML elements are positioned static by default. In the following codepen, you will find all the positioning possibilities in CSS.

Stacking context

What you already know is that an element with a higher z-index gets placed above elements with lower z-indexes. If a parent element is positioned below another parent element, the child elements can’t go higher than their parent element.

When elements are on the same level, one element will still be in front of the other one, because they have a default order in terms of the z-axis. This is called the stacking order

Stacking Context example:

Further information here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

z-index and Flexbox

You can apply z-index to flex item elements even if they are not position: absolute, relative, sticky or fixed.

Remember:

• z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky)
• child elements can’t go higher than their parent element
• You can apply z-index to flex items, even if they have position: static.