title: relative positioning, margin auto, and an img as a block
body: <p>I have an image that I have centered with <code>display: block;</code> and <code>margin: auto;</code> that I am trying to have partially overlap the div below it. I can't seem to figure out what is wrong with my code, and I can't find any info on the net (I really searched!). I hate to ask, but can I even mix position relative and margin auto? Is that what the problem is? Here is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='container'&gt;        
      &lt;img class='img-circle bio_pic' src='img/Matthew_bio_fin.jpg'&gt;    
      &lt;div class="jumbotron"&gt;
          &lt;div class="container"&gt;
              &lt;h1&gt;Hi! I'm ...!&lt;/h1&gt;
              &lt;p&gt;...&lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.bio_pic {
      width: 190px;
      height: 150px;
      margin: 0 auto 0 auto;
      border: solid green 4px;
      display: block;
      position: relative;
      top: 80;
      z-index: 5;
  }
  </code></pre>