如何在下面的另一个上面叠加div边框？

Question

我有一个底部边框的元素，我想在图像上显示它，然而，当我向下移动相关的div（使用负底边距）时，边框位于图像元素下面下。有没有办法将它设置在顶部？

我试过z-index但无济于事。我必须让“顶级”div具有边界。

<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/

由Placekitten托管并由Pieter Lanser

拍摄的图像

谢谢你们

Answer 1

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

position:relative; /* this is enough */

请参阅我之前的评论

Answer 2

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