为什么这些元素不重叠？

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属性是强制执行此操作。