Groups of elements with a common parent that move forward or backward together in the stacking order make up what is known as a stacking context. A full understanding of stacking contexts is key to really grasping how z-index and the stacking order work.
Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion!
New stacking contexts can be formed on an element in one of three ways:
- When an element is the root element of a document (the
<html> element)
- When an element has a position value other than
static and a z-index value other than auto
- When an element has an opacity value less than
1
The first and second ways to form stacking context make a lot of sense and are generally understood by Web developers (even if they don't know what they're called).
The third way (opacity) is almost never mentioned outside of w3c specification documents.
