为何绝对定位元素未与第一个元素发生重叠？

核心原因是绝对定位元素默认不会自动偏移位置：

• .caption是普通流里的块级元素，会占据页面上的一行空间。
• .description虽然设置了position: absolute脱离了文档流，但你没给它设置top/left这类偏移属性，它会保持自己在普通流里原本的位置——也就是.caption的下方，自然不会和.caption重叠。

如果要让它们重叠，只需要给.description加上偏移属性，比如：

.description{
  position: absolute;
  background-color: rgba(250, 0, 0, .7);
  top: 0;
  left: 0;
}

另外你提到的flex容器场景，这类场景里实现重叠更常见的做法是：

1. 给flex容器设置position: relative，让绝对定位元素以它为包含块
2. 给绝对定位的元素设置偏移，让它覆盖在flex子元素上方

示例代码：

<div class="carousel-container">
  <div class="caption">caption</div>
  <div class="description">description</div>
</div>

.carousel-container {
  display: flex;
  position: relative; /* 作为绝对定位元素的包含块 */
  height: 200px; /* 示例高度 */
}
.caption{
  background-color: rgba(0, 0, 0, .2);
  flex: 1;
}
.description{
  position: absolute;
  background-color: rgba(250, 0, 0, .7);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这样.description就会完全覆盖在.caption所在的flex容器上，这也是轮播组件里常用的文本叠加方式。

内容的提问来源于stack exchange，提问作者Luca Reghellin