What is `z-index` and how does stacking context work

The z-index CSS property controls the vertical stacking order of elements that overlap. An element with a higher z-index is positioned in front of an element with a lower z-index. This property only works on positioned elements (elements whose position value is set as anything other than "static").

To understand z-index, it is important to grasp the concept of stacking context. A stacking context is formed by an element that has a position value other than "static" and a z-index value other than "auto". Within this context, elements will be layered relative to each other. Child elements of a stacking context will respect their parent's stacking order.

For example:

<div style="position: relative; z-index: 1;"> Layer 1 - Background <div style="position: absolute; z-index: 2;"> Layer 2 - Middle </div> <div style="position: absolute; z-index: 3;"> Layer 3 - Foreground </div> </div>

z-index stacking context CSS positioning layering

Related Questions

How do I avoid rehashing overhead with std::set in multithreaded code?

How do I find elements with custom comparators with std::set for embedded targets?

How do I erase elements while iterating with std::set for embedded targets?

How do I provide stable iteration order with std::unordered_map for large datasets?

How do I reserve capacity ahead of time with std::unordered_map for large datasets?

How do I erase elements while iterating with std::unordered_map in multithreaded code?

How do I provide stable iteration order with std::map for embedded targets?

How do I provide stable iteration order with std::map in multithreaded code?

How do I avoid rehashing overhead with std::map in performance-sensitive code?

How do I merge two containers efficiently with std::map for embedded targets?