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>

.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:

Overlapping result

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.

1 answer


Give your .promo div and .preview paragraph a position of relative. Then give your .caption paragraph an absolute position and use left and right to get it where you need it to go:

.promo, .preview {position:relative}
.preview {z-index:1}
.preview img {display: block; margin: 0 auto; width: 80%}
.caption {position:absolute; z-index:2; background: white; padding: 0.50em; top: 2.00em; left:0}

There are other ways to accomplish this also but I find this way to be the most bullet proof across browsers.

Answered about 8 years ago by Darcy Bross