堆叠浮动元素
对于浮动元素,堆叠顺序略有不同。浮动元素放置在非定位元素和定位元素之间。
- 根元素的背景和边框。
- 后代非定位元素,按 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 #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;
}
结果
另请参阅
- 不使用 z-index 属性时的堆叠:不使用
z-index
时适用的堆叠规则。 - 使用 z-index:如何使用
z-index
更改默认堆叠。 - 堆叠上下文:关于堆叠上下文的说明。
- 堆叠上下文示例 1:2 层 HTML 层次结构,最后一层上的 z-index
- 堆叠上下文示例 2:2 层 HTML 层次结构,所有层上的 z-index
- 堆叠上下文示例 3:3 层 HTML 层次结构,第二层上的 z-index