title: How to overlap a div's border on top of another one below it?
body: <p>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?</p>
  
  <p>I tried z-index but to no avail. And I have to have the "top" div have the border.</p>
  
  <pre><code>&lt;div class="top"&gt;One&lt;/div&gt;
  &lt;div class="block"&gt;&lt;img src="http://placekitten.com/200/300"&gt;&lt;/div&gt;
  .top {border-bottom:5px solid red; margin-bottom:-3px; z-index:5;}
  </code></pre>
  
  <p><a href="http://jsfiddle.net/gdRWy/1/" rel="nofollow">http://jsfiddle.net/gdRWy/1/</a></p>
  
  <p>Image hosted by Placekitten and taken by: <a href="http://www.flickr.com/people/35652310@N00" rel="nofollow">Pieter Lanser</a></p>
  
  <p>Thanks guys</p>