html - 为什么同一层上的文本重叠 - 即使它具有不透明背景？

Question

我知道我可以通过创建具有相对/绝对定位 ( Demo ) 或不透明度 ( Demo ) 的新堆叠上下文来将元素堆叠在不同的层中

但我的印象是，默认情况下，html 中更靠下的元素将绘制在前面的元素之上。

显然，元素的背景是这样，但我只是注意到文本的工作方式不同。

所以简单的标记如下:

<div class="div1">text1</div>
<div class="div2">text2</div>

第二个 div 的背景将在第一个 div 之上，但文本重叠。

.div1,
.div2 {
  width: 200px;
  height: 150px;
  overflow: hidden;
  color: white;
}
.div1 {
  background: maroon;
}
.div2 {
  background: green;
  margin: -100px 0 0 100px;
}

<div class="div1"></div>
<div class="div2"></div>
<hr />
<div class="div1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="div2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</div>

Demo

我必须创建一个新的堆叠上下文来防止文本在这里重叠吗？

Answer 1

Why does text on the same layer overlap - even when it has an opaque background?

spec说(强调我的):

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

背景和文字的绘制顺序是分开考虑的:背景用#3表示，文字用#5表示。第二个元素稍后出现在源代码中，因此它被绘制在第一个元素之上，但文本仍然需要被绘制在背景之上，因为这两个元素参与相同的堆叠上下文。

Must I create a new stacking context to prevent the text overlapping here?

是的，处理这个问题的最好方法是定位元素或让它们建立自己的堆叠上下文。堆叠上下文始终是独立的，因此让每个元素建立自己的堆叠上下文将始终确保两个元素的背景和文本不会彼此重叠。