CSS负边距疑问：为何child1文本覆盖child2背景却在其文本下方？

现象原因 #

你遇到的情况是CSS堆叠层级规则导致的：

• 普通流里的非定位块级元素，其背景/边框的堆叠层级低于文本/内联内容
• 同时，在同一堆叠层级下，HTML中靠后的元素会排在靠前元素的上方

当child2设置负margin往上偏移后，和child1重叠：

• child1的文本属于"内联内容"层级，比child2的"块级背景"层级高，所以会覆盖child2的背景
• child2的文本同样属于"内联内容"层级，且因为它在HTML里更靠后，所以会排在child1文本的上方

最终就出现了：child1文本压着child2背景，却被child2文本压住的现象。

解决方案 #

要让child1整个位于child2下方，只需要把child2变成定位元素，这样它的整体堆叠层级会直接超过普通流中的内联内容。修改child2的CSS：

.child2 {
  color: black;
  background-color: green;
  margin: -35px 0 0 20px;
  position: relative; /* 添加相对定位 */
}

添加position: relative后，child2的整个盒子（包括背景和文本）都会被提升到更高的堆叠层级，完全覆盖在child1上方，符合你的预期。

内容的提问来源于stack exchange，提问作者Wael Habbal