请考虑以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
font-size: 2em;
font-family: Verdana;
font-weight: bold;
}
p {
border: 3px solid blue;
margin-top: -50px;
background-color: green;
color: white;
}
</style>
</head>
<body>
<h1>QUESTION</h1>
<p>The header text in the preceding h1 element is behind this
paragraph's text (as expected), but on top of this paragraph's
background and border (not expected).
</p>
</body>
</html>
请参阅此处的示例:http://jsfiddle.net/ZKHc9/
为什么段落的背景和边框不像内容那样呈现在标题的顶部？
因为这两个元素在同一堆叠上下文中都是流入的,非定位的块级元素.
两个流入的,未定位的块彼此不严格地"高于"或"低于" - 它们的内容和背景分开堆叠.
添加position: relative将使元素定位(带z-index: auto)并将其放置在同一堆叠上下文中的非定位元素上方:它将在下面的绘制算法中的步骤8处呈现.
如果您仔细阅读CSS2规范对堆叠上下文的详细描述,您会发现这是正确的行为.
在同一堆叠上下文中的流入,非定位,块级元素首先渲染所有背景,然后渲染其所有内容.他们的背景位于定位元素之上,其中包含负数z-index,低于其他所有元
绘画算法中的相关步骤:
- ...
- ...
- ...
- 对于树中顺序的所有流入,非定位,块级后代:如果元素是块,列表项或其他等效块:
- 元素的背景颜色.
- 元素的背景图像.
- 元素的边界.
- ...
- ...
- ...按树顺序的所有流入,非定位,块级后代:
- ...
- ...对于该元素的每个行框:
- 对于该元素的子元素的每个框,在该行框中,按树顺序:
- ...
- ...
- ...
- 对于内联元素:
- 对于此行框中的所有元素的in-flow,非定位,内联级子级,以及此行框中元素内的所有文本运行,按树顺序:
- 如果这是一段文字,那么:
- ...
- ...
- 文本.
- ...
- ...
- ...
- ...
浮动和定位元素始终是"原子的" - 它们的背景和内容将在一个步骤(第3步,第5步,第8步或第9步)中一起渲染.但是在相同堆叠上下文中的流入的,未定位的块元素具有所有它们的背景(在步骤4中),然后渲染它们的所有内容(在步骤7中).
在这种情况下,对于流入的,未定位的同级元素H1和P(树中P之前的H1),步骤4呈现H1背景然后呈现P背景,然后步骤7呈现H1内容然后呈现P内容.