如何将 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;}