層疊浮動元素
對於浮動元素，堆疊順序略有不同。浮動元素位於非定位元素和定位元素之間。
- 根元素的背景和邊框。
- 按 HTML 中出現的順序排列的後代非定位元素。
- 浮動元素。.
- 按 HTML 中出現的順序排列的後代定位元素。
請參閱定位型別以瞭解定位元素和非定位元素的解釋。
注意：如果將 opacity 值應用於非定位元素（即下面示例中的 DIV #4），則會發生奇怪的事情：該塊的背景和邊框會彈出到浮動塊和定位塊的上方。這是由於規範中一個特殊的部分：應用 opacity 值會建立一個新的堆疊上下文（請參閱關於 z-index 你所不知道的事）。
示例
在此示例中，您可以看到非定位元素 (DIV #4) 的背景和邊框完全不受浮動元素的影響，但內容受影響。這符合標準浮動行為，可以透過新增到上述列表中的規則來顯示
- 根元素的背景和邊框。
- 按 HTML 中出現的順序排列的後代非定位元素。
- 浮動元素。
- 後代非定位行內元素.
- 按 HTML 中出現的順序排列的後代定位元素。
HTML
html
<div id="abs1"><strong>DIV #1</strong><br />position: absolute;</div>
<div id="flo1"><strong>DIV #2</strong><br />float: left;</div>
<div id="flo2"><strong>DIV #3</strong><br />float: right;</div>
<br />
<div id="sta1"><strong>DIV #4</strong><br />no positioning</div>
<div id="abs2"><strong>DIV #5</strong><br />position: absolute;</div>
<div id="rel1"><strong>DIV #6</strong><br />position: relative;</div>
CSS
css
div {
padding: 10px;
text-align: center;
}
strong {
font-family: sans-serif;
}
#abs1 {
position: absolute;
width: 150px;
height: 200px;
top: 10px;
right: 140px;
border: 1px dashed #990000;
background-color: #ffdddd;
}
#sta1 {
height: 100px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 10px;
text-align: left;
}
#flo1 {
margin: 0px 10px 0px 20px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
}
#flo2 {
margin: 0px 20px 0px 10px;
float: right;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
}
#abs2 {
position: absolute;
width: 150px;
height: 100px;
top: 80px;
left: 100px;
border: 1px dashed #999900;
background-color: #ffdddd;
}
#rel1 {
position: relative;
border: 1px dashed #999966;
background-color: #ccffff;
margin: 0px 10px;
text-align: left;
}