HTML and CSS Reference
In-Depth Information
In order to clearly demonstrate how
z-index
works, the image above
exaggerates the display of stacked elements in relation to the viewport.
e Natural Stacking Order
In an HTML page, the natural stacking order (i.e. the order of elements on
the
Z
axis) is determined by a number of factors. Below is a list showing the
order that items fit into a stacking context, starting with the bottom of the
stack. This list assumes none of the items has
z-index
applied:
• Background and borders of the element that establish stacking context
• Elements with negative stacking contexts, in order of appearance
• Non-positioned, non-floated, block-level elements, in order of
appearance
• Non-positioned, floated elements, in order of appearance
• Inline elements, in order of appearance
• Positioned elements, in order of appearance
