これらの要素が重なっていないのはなぜですか？

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プロパティが必須です。