层叠上下文与元素重叠显示顺序的奥秘
HTML文档中，多个元素重叠时，层叠顺序决定了哪个元素位于最上层。然而，实际情况有时会与预期不符。
让我们分析一个例子：
假设有如下HTML结构：
立即学习“前端免费学习笔记（深入）”；
文本文本
并应用以下CSS样式：
#容器1 {
position: absolute;
top: 0;
left: 0;
}
#容器2 {
position: absolute;
top: 20px;
left: 0;
}
容器1和容器2都采用绝对定位，且部分重叠。直觉上，容器1应该在容器2之下。
然而，实际显示结果可能是容器2中的div元素覆盖了容器1中的span元素。这是因为层叠上下文在起作用。
尽管容器1和容器2都使用了position: absolute，但未明确设置z-index属性。浏览器会为它们分配默认的z-index值，通常情况下，后生成的元素拥有更高的z-index。在本例中，容器2在HTML中位于容器1之后，因此其z-index值更高，导致其内容覆盖了容器1的内容。
所以，即使元素在逻辑上属于不同的层叠上下文，后生成的元素也可能由于更高的z-index而覆盖先前的元素，这就好比“后来居上”的现象。 理解层叠上下文对于精确控制元素重叠显示至关重要。
