Understanding the Fundamentals of CSS z-index
A Straightforward Concept
The CSS property known as z-index revolves around a simple idea: Elements with higher values will be positioned in front of elements with lower values along the z-axis. For instance, if you assign z-index: 1 to div.box1 and div.box2 has a z-index: 0, then div.box1 will overlay div.box2.
In terms of the z-axis, it denotes depth on a three-dimensional plane. In the context of your device, it signifies the plane on which objects move closer or farther from your perspective. (Further insights can be found about the Cartesian coordinate system.)
https://i.sstatic.net/wmy0R.png
Source: Wikipedia
Application of z-index on Positioned Elements
It's important to note that the z-index property only functions on positioned elements unless dealing with flex items or grid items. This implies that z-index can be utilized on elements with a position: absolute, position: relative, position: fixed, or position: sticky. If an element possesses a position: static (default value), or some other positioning technique like a float, then z-index won't have any impact.
While z-index, according to definitions in CSS 2.1, exclusively applies to positioned elements, flex items and grid items can generate a stacking context even if position is set to static.
4.3. Flex Item Z-Ordering
Flex items are painted identically to inline blocks, except that order-modified document order is employed rather than raw
document order, and z-index values apart from 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 mirrors that of inline blocks, but with order-modified document order instead of raw document order, and z-index values aside from auto establish a stacking context despite
position being static.
View a demonstration illustrating z-index at work on non-positioned flex items: https://jsfiddle.net/m0wddwxs/
Insight into Stacking Contexts
When an element is positioned and a z-index is assigned, a stacking context emerges.
(Refer also to: Complete enumeration of scenarios resulting in a created stacking context.)
The stacking context operates as a regulatory framework for the positioned element bearing z-index, as well as its offspring. These guidelines dictate the arrangement of child elements within the stacking order and the extent of influence exerted by the property.
To put it simply, the stacking context confines the scope of z-index to the specific element itself, with its child elements unable to disrupt the stacking order of elements belonging to another stacking context.
If you've ever attempted escalating z-index values to no avail, there's a possibility that you were trying to overlay an element existing in a distinct stacking context.
Sets of elements under a unified parent entity moving forward or backward jointly in the stacking order constitute what's termed a stacking
context. A comprehensive comprehension of stacking contexts serves as a pivotal aspect in truly grasping how z-index and the stacking order operate.
Each stacking context designates a singular HTML element as its root command. When a fresh stacking context is triggered on an element, all associated child elements get confined to precise slots within the stacking order. This implies that if an element resides within a stacking context towards the base of the stacking order, there exists no pathway
to bring it forward ahead of another element lodged in an alternative stacking context positioned higher up in the stacking order, regardless of setting a z-index figure soaring beyond imagination!
~ What No One Told You About Z-Index
Navigating the Stacking Order
CSS abides by a stacking order while structuring elements on a webpage. Here are the stacking directives when no z-index is stipulated, ranging from the most distant to closest proximity:
- Backgrounds and borders of the root element
- Non-positioned, non-floating block elements, organized per source code sequence
- Non-positioned floating elements, structured per source code sequence
- Inline elements
- Positioned elements, organized per source code sequence
Incorporation of the z-index attribute alters the stacking order as follows:
- Backgrounds and borders of the root element
- Positioned elements possessing a
z-index below 0
- Non-positioned, non-floating block elements, arranged per source code sequence
- Non-positioned floating elements, arranged per source code sequence
- Inline elements
- Positioned elements, organized per source code sequence
- Positioned elements with
z-index exceeding 0
Source: W3C
Essentially: Clarity on stacking contexts makes comprehending z-index straightforward.
To observe z-index in operation, refer to: Explaining How z-index Operates!
For a concise yet enlightening piece elucidating z-index (including the implications of opacity on the stacking order), check out: Unveiling Lesser-Known Details About Z-Index
To delve into a comprehensive examination of z-index, replete with numerous examples and graphics, visit: MDN Understanding CSS z-index
And should you desire an in-depth exploration concerning stacking contexts, peruse through: W3C Elaborate Explanation of Stacking Contexts