如何使一个div的边框覆盖在下面的另一个div上方？

Question

我有一个带底部边框的元素，我想把它显示在一张图片的上方，但是当我将相关的div向下移动（使用负底边距）时，边框会被位于下面的图像元素覆盖。有没有办法将其置于顶部？

我尝试了z-index，但无济于事。而且我必须让"top" 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拍摄。

感谢大家。

- user2413333

---

position:relative;本身就可以实现这个功能，如果真的需要，它会触发z-index。 - G-Cyrillus

顺便说一句：https://dev59.com/o2435IYBdhLWcg3wxDL_ - coreyward

Answer 1

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

position:relative; /* this is enough */

请查看我之前的评论。

- G-Cyrillus

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

- roshan