HTML & CSS Interview Question #84

What is a stacking context in CSS?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

A stacking context is a self-contained stacking environment. Elements inside one stacking context are ordered relative to each other, and the entire context is then stacked as one unit relative to sibling contexts.

Detailed Explanation

A stacking context is a self-contained stacking environment. Elements inside one stacking context are ordered relative to each other, and the entire context is then stacked as one unit relative to sibling contexts.

Stacking contexts can be created by several conditions, including positioned elements with a non-auto z-index and properties such as opacity below 1, transform, and certain containment or isolation settings. Understanding them is essential when debugging overlays and menus.

Code Example

.panel {
    position: relative;
    z-index: 1;
}

.transformed-card {
    transform: translateZ(0);
    /* A transform creates a stacking context. */
}