title: How would you overlap divs?
body: <p>What would be the ideal way to get this thumbnail grid to overlap the two underlying divs (white and gray backgrounds)?  Im using Foundation 6 for this project but no success yet. I know i should probably be using z-index but its not working.  Any insight?</p>
  
  <p>Link to design below:</p>
  
  <p><a href="http://i.stack.imgur.com/ThPvD.png" rel="nofollow">overlaping divs</a></p>
  
  <p>Here is the code ive got so far:</p>
  
  <pre><code>&lt;section class="instructors"&gt;
  &lt;div class="instructors-top"&gt;
    &lt;h4&gt;MEET OUR INSTRUCTORS&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="instructors-pic"&gt;
    &lt;ul class="small-block-grid-3"&gt;
      &lt;img src="images/kermit.png"&gt;
      &lt;img src="images/patches.jpeg"&gt;
      &lt;img src="images/chef.jpg"&gt;
      &lt;img src="images/ButtersStotch.png"&gt;
    &lt;/ul&gt;
    &lt;ul class="small-block-grid-3"&gt;
      &lt;img src="images/PeterGriffin.jpg"&gt;
      &lt;img src="images/Eustace.jpg"&gt;
      &lt;img src="images/homer.gif"&gt;
      &lt;img src="images/buck.jpg"&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="instructors-bottom"&gt;
    &lt;p&gt;
      Each of our instrutors are the perfect combo of support and encouragement.&lt;br&gt;
      They are here to help you meet your goals and become a better mind here.
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the css:</p>
  
  <pre><code>.instructors-top {
    height: 200px;
    background-color: white;
  
  }
  
  .instructors-top h4 {
    color: gray;
    font-size: 14px;
    text-align: center;
    padding-top: 55px;
    z-index: 1;
  }
  
  .instructors-bottom {
    background-color: #e4e5de;
    height: 300px;
    padding-top: 150px;
    z-index: 1;
  
  }
  
  .instructors-bottom p {
    color: gray;
    text-align: center;
  }
  
  .small-block-grid-3 img{
    height: 100px;
    width: 100px;
    padding: 5px;
  
  }
  
  .instructors-pic {
    margin: auto;
    position: absolute;
    z-index: 2;
  }
  </code></pre>