爲什麼這些元素不重疊？

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屬性是強制執行此操作。