Layered presentation - z-index and stacking

• References
• Stacking context
• Default ordering
• z-index
• Examples

References

Reference: CSS 2.2 Visual formatting model details - Layered presentation

You have some control over how elements are stacked with CSS.

Stacking context

Stacking context is a core concept in CSS layering. Essentially elements in the same stacking context can be configured to overlap each other in different ways with CSS rules such as z-index. Where as elements in different stacking contexts have their layering controlled by their first ancestors that are in the same stacking context.

What creates a new stacking context?

There are many different things that can cause a new stacking context to be created, see here. Some examples:

• Root element of the document
• Element with a position value of absolute or relative and z-index other than auto.
• Element with a position value of fixed or sticky.
• Children of flex or grid containers with a z-index value other than auto.
• Element with opacity valueless than 1.
• Element with transform, filter, perspective, clip-path, etc.
• Element with isolation: isolate.
• Element with container value of layout or paint.

Default ordering

By default elements will be positioned in their DOM order.

z-index

Elements in the same stacking context can have how they stack controlled with the z-index property. Note in a flow formatting context elements must be positioned to allow z-index to have an effect.

Examples