This part covers CSS stacking contexts, controlled/uncontrolled components, Pure Components, positioning, HTTP protocols, and client-side storage options.
Question 1. What is z-index and what is a Stacking Context?
z-index
- Determines the stacking order of elements along the z-axis.
- Higher
z-index values appear in front of lower values.
Stacking Context
- A new stacking context is created under certain conditions:
- Root element (
<html>)
- Elements with
position: absolute | relative | fixed | sticky and z-index not auto
- Elements with
opacity < 1
- Elements with a
transform applied
Important Rules
z-index is only compared within the same stacking context.- A child cannot escape its parent’s stacking context.
Common Issue
- Modals, dropdowns, tooltips appear “behind” other elements despite high
z-index.
- Cause: trapped in a parent stacking context.
Solutions
- Remove the parent’s stacking context (
position, transform, etc.).
- Render modal/dropdown at the root (e.g.,
<body>).
React Portals
ReactDOM.createPortal renders components outside normal DOM hierarchy.- Useful for modals, dropdowns, and tooltips.