What is a stacking context in CSS and how does z-index work within it?

Explanation

A stacking context is a group of elements that have a specific stacking order. z-index only compares values within the same stacking context. Elements with position (absolute, relative, fixed, sticky) and a z-index value, opacity < 1, transform, or filter create new stacking contexts. Within a context, higher z-index appears on top. A child in a lower-stacking-context cannot appear above a sibling of a higher-stacking-context, regardless of z-index value. Understanding stacking contexts prevents z-index escalation.