我知道我可以通过使用相对/绝对定位创建新的堆叠上下文来将元素堆叠在单独的层中（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
我必须创建一个新的堆叠上下文以防止文本在此处重叠吗？
为什么同一层上的文本会重叠 - 即使它具有不透明的背景？
The spec说（强调我的）：
在每个堆叠上下文中，以下图层按从后到前的顺序绘制：
- 形成堆叠上下文的元素的背景和边框。
- 具有负堆栈级别的子堆栈上下文（首先是最负的）。
- 流入、非内联级别、非定位后代。
- 非定位浮动。
- 流入、内联级、非定位后代，包括内联表和内联块。
- 堆栈级别为 0 的子堆栈上下文和堆栈级别为 0 的定位后代。
- 具有正堆栈级别的子堆栈上下文（最不积极的优先）。
背景和文本按照绘制顺序分开考虑：背景用#3 表示，文本用#5 表示。第二个元素稍后出现在源中，因此它被绘制在第一个元素上，但文本仍然需要绘制在背景上，因为这两个元素参与相同的堆叠上下文。
我必须创建一个新的堆叠上下文以防止文本在此处重叠吗？
是的，处理这个问题的最佳方法是定位元素或让它们建立自己的堆叠上下文。堆叠上下文始终是独立的，因此让每个元素建立自己的堆叠上下文将始终确保两个元素的背景和文本不会相互重叠。