Question

I have the following markup:

<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;
}

And this is what I get:

Why does the caption element not overlap the image? It does overlap the .preview div without an image in it. It also does not overlap when the image has display: inline.

Answer 1

Force the caption to go up with position: relative; z-index: 2;.

The behaviour of overlap is unpredictable with staticly positioned elements. The z-index property lets you state clearly if you want it above or below another element. The position property is mandatory for this to work.