1
HTML/CSSAdvanced#css#stacking-context
HTML/CSSAdvanced#css#z-index#stacking-context
What is the z-index property and how does stacking context work?
z-index controls the stacking order of positioned elements along the z-axis (higher values appear on top), but only works on positioned elements (not static). A stacking context is a self-contained layer created by properties like position + z-index, opacity < 1, or transform — z-index values only compete within the same context.
Example
.modal {
position: fixed;
z-index: 1000;
}
/* A child z-index: 9999 inside a parent with its own stacking context
still can't escape above a sibling with a higher z-index context */