Stacking with floated blocks
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).
Source code for the example
HTML
<div id="abs1">
<b>DIV #1</b><br />position: absolute;</div>
<div id="flo1">
<b>DIV #2</b><br />float: left;</div>
<div id="flo2">
<b>DIV #3</b><br />float: right;</div>
<br />
<div id="sta1">
<b>DIV #4</b><br />no positioning</div>
<div id="abs2">
<b>DIV #5</b><br />position: absolute;</div>
<div id="rel1">
<b>DIV #6</b><br />position: relative;</div>
CSS
div {
padding: 10px;
text-align: center;
}
b {
font-family: sans-serif;
}
#abs1 {
position: absolute;
width: 150px;
height: 200px;
top: 10px;
right: 140px;
border: 1px dashed #900;
background-color: #fdd;
}
#sta1 {
height: 100px;
border: 1px dashed #996;
background-color: #ffc;
margin: 0px 10px 0px 10px;
text-align: left;
}
#flo1 {
margin: 0px 10px 0px 20px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #090;
background-color: #cfc;
}
#flo2 {
margin: 0px 20px 0px 10px;
float: right;
width: 150px;
height: 200px;
border: 1px dashed #090;
background-color: #cfc;
}
#abs2 {
position: absolute;
width: 150px;
height: 100px;
top: 80px;
left: 100px;
border: 1px dashed #990;
background-color: #fdd;
}
#rel1 {
position: relative;
border: 1px dashed #996;
background-color: #cff;
margin: 0px 10px 0px 10px;
text-align: left;
}
See also
- Stacking without the z-index property: The stacking rules that apply when
z-index
is not used. - Using z-index: How to use
z-index
to change default stacking. - The stacking context: Notes on the stacking context.
- Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
- Stacking context example 2: 2-level HTML hierarchy, z-index on all levels
- Stacking context example 3: 3-level HTML hierarchy, z-index on the second level