Question

我正在努力解决一些基本的CSS布局流程。如果我有一个接一个的两个div，其中第二个div有一个负的上边距，我希望它与前面的div重叠。

但是，我发现虽然第一个div确实是重叠的，但它的内容却不是。

<div style="background:green;height:20px;">
  <span style="background:red;display:inline-block;padding:2px;">HELLO</span>
  <span style="background:red;display:inline-block;padding:2px;">HELLO</span>
  <span style="background:red;display:inline-block;padding:2px;">HELLO</span>
</div>
<div style="background:yellow;height:20px;margin-top:-10px;">
</div>

https://jsfiddle.net/xwghd5r2/

这似乎与基本堆叠顺序的原则背道而驰：

来自https://css-tricks.com/almanac/properties/z/z-index/：

没有任何z-index值，元素按照它们的顺序堆叠   出现在DOM中（同一层次结构中最低的一个）   出现在上面）。具有非静态定位的元素将始终   出现在具有默认静态定位的元素之上。

另请注意，嵌套起着重要作用。如果元素B位于顶部   对于元素A，元素A的子元素永远不能高于   要素B。

注意：我不是通过更改position属性来寻找解决方法 - 我只是想了解为什么当前流程发生在默认的静态定位中。< / p>

Answer 1

绘画顺序在Appendix E中定义。

当浏览器绘制这些内容时，它将首先绘制块的背景

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


元素的背景颜色。

内联块的背景将在块的前面绘制：

否则：首先是元素，然后是树中顺序的所有流入，非定位，块级后代：



否则，对于该元素的每个行框：



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


元素的背景颜色。

请注意，第二个块的内容仍将在内联块前面绘制：

div {
  height: 20px;
  background: green;
}
div + div {
  background: yellow;
  margin-top: -10px;
  color: #0ff;
}
span {
  background: red;
  display: inline-block;
  padding: 2px;
}

<div>
  <span>HELLO</span>
  <span>HELLO</span>
  <span>HELLO</span>
</div>
<div>█ █ █ █ █ █ █ █ █</div>

Answer 2

使用position: relative，研究位置和z-index。

https://jsfiddle.net/xwghd5r2/1/

Answer 3

您希望黄色div与第一个div内容重叠吗？在黄色div上添加：position:relative。

Answer 4

希望这会有所帮助。以下是代码：https://jsfiddle.net/xwghd5r2/3/

＆＃13;

nav, #down {
  position: relative;
}

＆＃13;

<nav style="background:green;height:20px;">
  <li style="background:red;display:inline-block;padding:2px;">HELLO</li>
  <li style="background:red;display:inline-block;padding:2px;">HELLO</li>
  <li style="background:red;display:inline-block;padding:2px;">HELLO</li>
</nav>
<div id="down" style="background:yellow;width:100%;height:20px;margin-top:-10px;">
</div>

＆＃13;

Answer 5

据我所知，父元素子元素的索引总是更高。

让我们根据你的例子讨论：

<div style="background:green;height:20px;"> <-- index: 1
  <span style="background:red;display:inline-block;padding:2px;">HELLO</span> <-- index: 2
  <span style="background:red;display:inline-block;padding:2px;">HELLO</span> <-- index: 2
  <span style="background:red;display:inline-block;padding:2px;">HELLO</span> <-- index: 2
</div>
<div style="background:yellow;height:20px;margin-top:-10px;"> <-- index: 1
</div>

因此，根据您的示例，与span个元素相比，您的div元素将显示在前景中。另一方面，第二个div元素将与第一个元素重叠。那是因为它们具有相同的索引值。

换句话说，您的浏览器将根据元素索引值（您自己的索引值当然是首选）和（如果索引相同）按照放置在标记内的顺序呈现标记

注意： 元素的任何样式更改都可以导致不同的行为，如果它不是您的浏览器的默认行为。

CSS负边距重叠不适用于子元素

5 个答案: