Interview Question

What causes stacking context?

Stacking contexts are created by defined properties such as positioned z-index, opacity, transforms, and isolation.

💡 Concept ✅ Quick Revision 🎨 CSS

Answer

Specific CSS conditions cause an element to establish a stacking context. • Examples include the root element and positioned elements with a non-auto z-index. • Opacity below one, transforms, filters, isolation:isolate, and some containment values also create one. • Creating a context changes z-index comparison boundaries.

💡 Simple Example

.component { isolation: isolate; }

⚡ Quick Revision

Stacking contexts are created by defined properties such as positioned z-index, opacity, transforms, and isolation.