为什么这些元素不重叠？

Question

我有以下标记：

<div class="promo">
    <p class="preview"><a href="#"><img src="preview.png"></a></p>
    <p class="caption"><a href="/">Project caption</a></p>
</div>

.promo .preview img {
    display: block;
    margin: 0 auto;
    width: 80%;
}

.promo .caption {
    background: white;
    padding: 0.50em;
    margin-top: -2.00em;
}

这就是我得到的：

为什么标题元素不与图像重叠？它与.preview div重叠，但没有图像。当图像具有display: inline时，它也不会重叠。

Answer 1

强制标题使用position: relative; z-index: 2;。

重叠的行为是静态定位元素无法预测的。 z-index属性可让您清楚地说明是否需要在另一个元素的上方或下方。必须使用position属性才能生效。