Q20: How do Stacking Contexts affect z-index ordering?
An element's z-index layer ordering operates strictly within its active Stacking Context. A child element with z-index: 9999 inside a parent with z-index: 1 will never stack above a neighboring parent with z-index: 2. Stacking contexts are created by opacity < 1, transform properties, filter effects, or setting isolation: isolate.
Creating Isolated Stacking Context
.card {
isolation: isolate; /* Establishes isolated stacking boundary */
}
.card-badge {
position: absolute;
z-index: 10; /* Contained inside .card stacking context */
}💡 isolation: isolate prevents child z-index values from leaking into global page layout stacks.
Key Takeaways
z-indexcomparisons occur strictly within shared stacking contexts.isolation: isolatecreates a clean isolated stacking context.
Knowledge Check
Which property safely isolates descendant z-index layers into a new stacking context?