Interview Question

What are stacking contexts?

A stacking context groups painting order so descendants cannot escape it.

💡 Concept ✅ Quick Revision 🎨 CSS

Answer

A stacking context is an independent three-dimensional painting context. • Descendants are stacked together inside their context. • The completed context is then treated as one unit in its parent context. • A descendant z-index cannot place content outside its ancestor stacking context.

💡 Simple Example

.modal { position: fixed; z-index: 10; isolation: isolate; }

⚡ Quick Revision

A stacking context groups painting order so descendants cannot escape it.