CODEWITHSUNDEEP
cssoverlap
Ross
Ross

Reputation: 47007

Why aren't these elements overlapping?

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:

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.

Upvotes: 1

Views: 128

Answers (1)

josemota
josemota

Reputation: 984

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.

Upvotes: 2

Related Questions