For floated blocks, the stacking order is a bit different. Floating blocks are placed between non-positioned blocks and positioned blocks:
- The background and borders of the root element
- Descendant non-positioned blocks, in order of appearance in the HTML
- Floating blocks
- Descendant positioned elements, in order of appearance in the HTML
See types of positioning for an explanation of positioned and non-positioned elements.
Actually, as you can see in the example below, the background and border of the non-positioned block (DIV #4) is completely unaffected by floating blocks, but the content is affected. This happens according to standard float behavior. This behavior can be shown with an added rule to the above list:
- The background and borders of the root element
- Descendant non-positioned blocks, in order of appearance in the HTML
- Floating blocks
- Descendant non-positioned inline elements
- Descendant positioned elements, in order of appearance in the HTML
Note: If an opacity
value is applied to the non-positioned block (DIV #4), then something strange happens: the background and border of that block pops up above the floating blocks and the positioned blocks. This is due to a peculiar part of the specification: applying a opacity
value creates a new stacking context (see What No One Told You About Z-Index).