title: Z-index for image and div
body: <p>I am looking for a way to allow an image inside of a div to stay overflow:visible and to allow the border of the parent div to overlap the image. Right now I have the image right where I want it using negative margins, but the images is covering the parent div's border.</p>
  
  <p>I tried using z-index for the image and the div but that did now work.</p>
  
  <p>This is the effect that I am trying to achieve. </p>
  
  <p><a href="http://imgur.com/a/yt8eU" rel="nofollow">http://imgur.com/a/yt8eU</a></p>
  
  <p>This where I currently am.</p>
  
  <p><a href="http://imgur.com/a/sgYjI" rel="nofollow">http://imgur.com/a/sgYjI</a></p>
  
  <p><a href="https://jsfiddle.net/zgwywq0v/" rel="nofollow">https://jsfiddle.net/zgwywq0v/</a></p>
  
  <pre><code>random html &lt;p&gt;
  </code></pre>