Q310- What is stacking context in CSS?

Stacking context in CSS is the concept that defines how elements are layered (stacked on the z-axis) — i.e., which element appears on top of another.

---

🧱 What is a Stacking Context?

A stacking context is a self-contained stacking order for elements.
Once an element creates a stacking context, its children are stacked only within that context, not compared with elements outside it.

👉 Think of it as a mini z-index world.

---

🔑 How a Stacking Context Is Created

An element creates a new stacking context when it has:

✅ Common cases

position: relative | absolute | fixed | sticky;
z-index: any value except auto;

opacity: less than 1;

transform: translate() | scale() | rotate();

filter: blur();

perspective;

isolation: isolate;

will-change: transform;

contain: layout | paint;

---

🧪 Example

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

.child {
  position: absolute;
  z-index: 999;
}

Even with z-index: 999, .child cannot overlap elements outside .parent's stacking context.

---

⚠️ Common Confusion (Interview Favorite)

.modal {
  z-index: 1000;
}

But it still appears behind another element ❌

🧠 Reason:

• The modal is inside a lower stacking context
• z-index only works within the same stacking context

---

📌 Stacking Order (Simplified)

Within a stacking context, elements are layered in this order:

1. Background & border of element
2. Negative z-index children
3. Normal flow elements
4. Positioned elements (z-index: auto)
5. Positive z-index elements

---

🎯 Why Stacking Context Is Important

✔ Prevents unexpected overlaps
✔ Explains z-index bugs
✔ Crucial for modals, dropdowns, tooltips
✔ Helps debug UI layering issues

---

🎯 Short Interview Answer

A stacking context is a CSS concept that defines how elements are stacked along the z-axis.
It is created by certain CSS properties like position with z-index, opacity, or transform.
Elements are stacked only within their own stacking context, which explains many z-index issues.

---

⭐ One-line summary

z-index works only within the same stacking context — not globally.