Question

请考虑以下代码：

<!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/

为什么段落的背景和边框不像内容一样呈现在标题的顶部？

Answer 1

因为这两个元素在同一堆叠上下文中都是 in-flow，non-located，块级元素。

两个流入的，未定位的块彼此不严格“高于”或“低于” - 它们的内容和背景分别堆叠。

添加position: relative会使元素定位（使用z-index: auto）并将其放置在同一堆叠上下文中的非定位元素上方：它将在下面的绘制算法中的步骤8中呈现。 / p>

如果您仔细阅读CSS2规范的Elaborate description of Stacking Contexts，您会发现这是正确的行为。

在同一堆叠上下文中的流入，非定位，块级元素首先渲染所有背景，然后渲染其所有内容。他们的背景位于元素之上，负数为z-index，低于其他所有元素。

绘画算法中的相关步骤：

...

...

...

对于树中顺序的所有流入，非定位，块级后代：如果元素是块，列表项或其他等效块：

元素的背景颜色。

元素的背景图片。

元素的边界。



...

...

...以树序排列的所有流入，非定位，块级后代：

...

...对于该元素的每个行框：

对于该元素的子元素的每个框，在该行框中，按树顺序：

...

...

...

对于内联元素：

对于所有元素的in-flow，非定位，内联级别的子级   在此行框中，以及此行中元素内的所有文本行   框，按树顺序：

如果这是一段文字，那么：

...

...

文字。

...













...

...

...

浮动和定位的元素总是“原子的” - 它们的背景和内容将在一个步骤（第3步，第5步，第8步或第9步）中一起渲染。但是，在相同堆叠上下文中的流入的，未定位的块元素具有所有其背景（在步骤4中），然后呈现它们的所有内容（在步骤7中）。

在这种情况下，对于流入的，未定位的同级元素H1和P（树中P之前的H1），步骤4渲染H1背景，然后渲染P背景，然后步骤7渲染H1内容，然后P内容。

Answer 2

HTML元素的默认堆叠顺序是代码中稍后的元素位于早期元素的“上方”。

将此添加到CSS：

position: relative;
z-index: 2;

Answer 3

如果即使按照上述输入进行操作后，您的代码仍然无法正常工作，请尝试使用下面提到的方法来找出问题所在。

在chrome浏览器中打开页面>右键单击>检查>控制台

在我的情况下，bootsrap样式表引用和jquery被错误地放置在控制台上，我发现此错误并进行了修复。

关于， Mukul Bawa

html堆栈顺序

3 个答案: