Question

我正试图了解如何沿z轴呈现html元素，并且整体上它是有意义的。

当没有元素具有z-index时，元素按此顺序堆叠（从下到上）：

1 - 根元素的背景和边界
2 - 正常流程中的后代块，按外观顺序（以HTML格式）
3 - 后代定位元素，按外观顺序（以HTML格式）

重要的是，可以存在不同的堆叠上下文;例如，通过使用定位或嵌套元素。

这一切都对我有意义。至少我认为它确实存在，直到我尝试将其付诸实践。

CSS ：

.element-one {
  border: 1px solid red;
  height: 5rem;
  background-color: pink;
}
.child-one {
  border: 5px solid red;
  margin-top: 150px;
  background-color: green;
}
.element-two {
  border: 5px solid orange;
  height: 25rem;
  background: url("https://cdn.pixabay.com/photo/2016/11/29/05/34/new-york-1867569_1280.jpg");
  margin-top: -30px;
}

HTML ：

<body>
  <div class="element-one">I am element one<p class="child-one">Child One</p></div>
  <div class="element-two">I am element two</div>

</body>

Fiddle

为什么'child-one'坐在'element-two'之上，即使它在正常流程之前（上面的第2点）。特别是考虑到'child-one'也是一个嵌套元素。让我更加困惑的是，它不是整个元素叠加在顶部，而只是内容，即'child-one'的红色边框堆叠在'element-two'后面。

Answer 1

这个问题的答案并不是很明显，甚至谷歌搜索也没有立即提出一个清晰的解决方案。

答案确实存在于“堆叠上下文”的概念中。此外，在该上下文中如何呈现或绘制每个元素。

通过仔细检查，可以在W3C Specs中找到答案。具体见附录E.2＆＃34;绘画顺序＆＃34;。在这里，您可以遵循绘制算法，该算法描述生成堆叠上下文的元素的后代的绘制顺序;在我的具体示例中，body标记。

问题中给出的页面以这种方式呈现，因为所有流入的，未定位的块级元素以单一方式呈现;也就是说，而不是开始呈现的每个元素的整体，而是堆叠上下文中的所有元素的背景和边框一起呈现，内容也是如此（文档将其称为＆＃34;原子＆＃34;渲染）。

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

元素的背景颜色。

元素的背景图片。

元素的边界。

沿z轴呈现HTML元素

1 个答案: