When the z-index
property is not specified on any element, elements are stacked in the following order (from bottom to top):
- The background and borders of the root element.
- Descendant non-positioned elements, in order of appearance in the HTML.
- Descendant positioned elements, in order of appearance in the HTML.
See types of positioning for an explanation of positioned and non-positioned elements.
Keep in mind, when the order
property alters rendering from the order of appearance in the HTML within flex
containers, it similarly affects the order for stacking context.