How does the z-index of child elements behave?
MDN web docs state the following for z-index of child elements (emphasis: mine) (rules referenced are stated in the linked page):
Within a stacking context, child elements are stacked according to the same rules explained just above. Importantly, the z-index values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.
As a college student of non-computer-science major, it is hard to understand what the intended meaning is. Here is my understanding:
- Once a stacking context is created for an element, its child elements obey the same rules for creating new stacking contexts.
- The
z-indexof child elements only moves elements within that stacking context. They can not be used to overlay a child element above an element within another stacking context; nor can they be used to move an element below another element of another stacking context. - I have no idea what the third sentence is trying to explain.
I would appreciate the correct explanation, pointing out where my understanding is wrong; and what the third sentence means.
Which elements can create a stacking context?
There is another confusion regarding which elements create stacking contexts. At the beginning of the section, it is stated (emphasis: mine):
A stacking context is formed, anywhere in the document, by any element in the following scenarios:
Whereas later, in a note, they contradict by saying (emphasis: mine):
The hierarchy of stacking contexts is a subset of the hierarchy of HTML elements because only certain elements create stacking contexts.
Did they intend to mean those elements which did not create a new stacking context because they did not follow the rules or elements which are unable to create a new stacking context despite following the rules?.
