For floated elements, the stacking order is a bit different. Floating elements are placed between non-positioned elements and positioned elements:
- The background and borders of the root element.
- Descendant non-positioned elements, in order of appearance in the HTML.
- Floating elements.
- Descendant positioned elements, in order of appearance in the HTML.
See types of positioning for an explanation of positioned and non-positioned elements.
Note: If an opacity
value is applied to a non-positioned element (i.e., DIV #4 in the example below), something strange happens: the background and border of that block pop up above the floating blocks and the positioned blocks. This is due to a peculiar part of the specification: applying an opacity
value creates a new stacking context (see What No One Told You About Z-Index).