html堆叠顺序 [英] html stack order

查看：225 发布时间：2017/2/7 21:53:42 html css stack order

本文介绍了html堆叠顺序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请考虑以下代码：

 <！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 (with z-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屋！

查看全文

html堆叠顺序 [英] html stack order

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

html堆叠顺序 [英] html stack order

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭