html堆叠顺序 [英] html stack order
问题描述
请考虑以下代码:
<!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>前面h1元素中的头文本位于
段落的文本之后(如预期的那样),但是位于这个段落的
背景和边框之上(不是预期的)。
< / p>
< / body>
< / html>
查看示例: http://jsfiddle.net/ZKHc9/
为什么段落的背景和边框不在标题的顶部像内容是?
因为这两个元素是每个在同一堆叠上下文中的元素。
两个流入的非定位块不是严格上方
添加 position:relative
会创建一个元素定位( z-index:auto
),并将其放置在同一堆叠上下文中的非定位元素上:将在下面的绘画算法的步骤8中渲染。 / p>
如果您阅读CSS2规格的详细描述Stacking Contexts ,你会发现这是正确的行为。
定位的块级元素在同一堆栈上下文中首先呈现所有其背景,然后再呈现所有其内容。他们的背景是上面定位的元素,具有负值 z-index
和低于一切。
绘画算法:
- ...
- 。 ..
- ...
- 对于所有其定位的,非定位的块级别后代,块,列表项或其他块等价物:
- 元素的背景颜色。
- 元素的背景图片。 >
- 元素的边框。
- ...
- 。 ..
- ...对于其所有流程中,非定位,块级别的后代,以树顺序:
- 。 ..
- ...对于该元素的每个行框:
- 对于作为该元素的子元素的每个框,
- ...
- ...
- ...
- 对于内联元素:
- 对于所有元素的in-flow, $ b,以及在这行
>
框中的元素中的所有文本行,以树顺序:
- 如果这是一个然后:
- ...
- ...
- 。
- ...
...
... / blockquote>
浮动和定位的元素总是原子 - 它们的背景和内容将在一个步骤(步骤3,5,8或9)一起呈现。但是,在同一堆栈上下文中的流程中,未定位的块元素具有所有其背景(在步骤4中),然后将其所有内容呈现(在步骤7中)。
在这种情况下,对于流内,非定位的兄弟元素H1和P(树中的P之前的H1),步骤4呈现H1背景,然后呈现P背景,然后步骤7呈现H1内容,然后P的内容。
Consider the following code:
<!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>
See the example here: http://jsfiddle.net/ZKHc9/
Why isn't the paragraph's background and border rendered on top of the header like the content is?
解决方案Because the two elements are each in-flow, non-positioned, block-level elements in the same stacking context.
Two in-flow, non-positioned blocks aren't strictly "above" or "below" each other -- their contents and backgrounds stack separately.
Adding
position: relative
will make an element positioned (withz-index: auto
) and place it above non-positioned elements in the same stacking context: it will be rendered at step 8 in the painting algorithm below.
If you read the CSS2 spec's Elaborate description of Stacking Contexts closely, you will see that this is correct behavior.
In-flow, non-positioned, block-level elements within the same stacking context first have all their backgrounds rendered, then all their contents. Their backgrounds are above positioned elements with a negative
z-index
and below everything else.The relevant steps in the painting algorithm:
- ...
- ...
- ...
- For all its in-flow, non-positioned, block-level descendants in tree order: If the element is a block, list-item, or other block equivalent:
- background color of element.
- background image of element.
- border of element.
- ...
- ...
- ... for all its in-flow, non-positioned, block-level descendants in tree order:
- ...
- ... for each line box of that element:
- For each box that is a child of that element, in that line box, in tree order:
- ...
- ...
- ...
- For inline elements:
- For all the element's in-flow, non-positioned, inline-level children that are in this line box, and all runs of text inside the element that is on this line box, in tree order:
- If this is a run of text, then:
- ...
- ...
- the text.
- ...
- ...
- ...
- ...
Floated and positioned elements are always "atomic" -- their backgrounds and contents will be rendered together in a single step (either step 3, 5, 8 or 9). But in-flow, non-positioned block elements within the same stacking context have all their backgrounds rendered (in step 4), then have all their contents rendered (in step 7).
In this case, for in-flow, non-positioned sibling elements H1 and P (H1 before P in the tree), step 4 renders the H1 background and then the P background, then step 7 renders the H1 content and then the P content.
这篇关于html堆叠顺序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!