examples

Understanding z-index and Stacking Contexts

Stacking contexts and the z-index property are closely connected and can be influenced by any number of properties from position to isolation as summarized in the blog post Putting Things on Top of Other Things:

z - index !== "auto" &&
  (position !== "static" || parentElement.style.display === ("flex" || "grid"));

opacity !== 1;
transform !== "none";
mix - blend - mode !== "normal";
filter !== "none";
perspective !== "none";
isolation === "isolate";
position === "fixed";

The post was written in 2018, today we can also include the will-change property and some values of the clip-path property. There may be more (haven’t been able to find a complete list within the standard pages themselves).

• Normal Order
• Normal Order and Position
• Position and z-index
• Position and z-index again
• Creating A New Stacking Context
• Opacity, Transform and Filter
• Opacity, Transform and Filter without Position Being Set
• Negative z-index Values
• Effect of overflow: hidden
• z-index in Flex or Grid Layouts
• z-index and isolation and mix-blend-mode

Source Code for examples

• Github
• Codepen

References:

Standards and MDN

• z-index (CSSWG)

• Understanding CSS z-index (MDN)

• An Elaborate Description of Stacking Contexts (W3C)

• The Stacking Context (MDN)

Articles

• z-index (Codrops)
• Understanding z-index in CSS (Shaheed Ahmad)

• [Solve your z-index issues

  z-index and stacking context explained (Kevin Powell)](https://www.youtube.com/watch?v=uS8l4YRXbaw)

• What No One Told You About Z-Index (Walton)
• Putting Things on Top of Other Things