How to overlap a div's border on top of another one below it?

Question

I have an element that has a bottom border and it I would like to show it on top of an image, however, when I move the relevant div down (using negative bottom margin) the border goes under an image element that is underneath. Is there a way to set it on top?

I tried z-index but to no avail. And I have to have the "top" div have the border.

<div class="top">One</div>
<div class="block"><img src="http://placekitten.com/200/300"></div>
.top {border-bottom:5px solid red; margin-bottom:-3px; z-index:5;}

http://jsfiddle.net/gdRWy/1/

Image hosted by Placekitten and taken by: Pieter Lanser

Thanks guys

position:relative; itself would do it, and triggers z-index if really needed — G-Cyrillus, Jul 30 '13 at 01:46
FWIW: http://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning — coreyward, Jul 30 '13 at 01:49

score 8 · Accepted Answer · answered Jul 30 '13 at 01:49

8

http://jsfiddle.net/gdRWy/3/

position:relative; /* this is enough */

See my earlier comment

answered Jul 30 '13 at 01:49

G-Cyrillus

101,410
14
105
129

score -1 · Answer 2 · answered Jul 30 '13 at 02:30

-1

<div class="top">One</div>
<div class="block"><img src="http://placekitten.com/200/300"></div>
.top {border-bottom:5px solid red; margin-bottom:-3px; z-index:5; position:relative;}

answered Jul 30 '13 at 02:30

roshan

9
1

How to overlap a div's border on top of another one below it?

2 Answers2