为什么绝对定位的元素不与第一个重叠？

Question

请查看下面的片段。老实说，我不明白为什么绝对定位元素(红色(没有与另一个元素重叠。为什么？

我都是通过分析一个更复杂的案例，在幻灯片上放一些我想复制的动画。他们利用了这种奇怪的(至少对我来说(行为，以及其他一些与flex容器相关的绝对pos。

不管怎样，我试着把事情简化到骨子里，就这样。为什么描述与标题不重叠？

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

<div class="caption">caption</div>
<div class="description">description</div>

Answer 1

description元素与caption元素不重叠，因为您尚未设置top、bottom、left或right属性。仅设置position: absolute;本身不会改变元素的位置。您还需要设置其中一个附加属性，以便告诉元素它将绝对定位在哪里。

试试类似的东西：

.caption{
background-color: rgba(0, 0, 0, .2);
}
.description{
position: absolute;
top: 8px;
background-color: rgba(250, 0, 0, .7);
}

<div class="caption">caption</div>
<div class="description">description</div>

Answer 2

要显式移动绝对定位的元素，需要设置top|bottom|left|right属性的CSS值。默认情况下，这些属性具有auto值——这是这种情况下的关键。

根据文件，当top: auto:

对于绝对定位的元素，元素的位置基于底部属性，而height:auto被视为基于内容的高度；或者，如果bottom也是自动的，则如果元素是静态元素，则将该元素定位在它应该垂直定位的位置。

与其他属性(bottom、left、right(类似。

因此，当您明确设置定位时，元素将已经重叠：

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

<div class="caption">caption</div>
<div class="description">description</div>