title: How to overlay div over other div's contents without being in that div
body: <p>I am making something and am wondering how to get a div to overlay another div and it's contents. What I am trying to do it kinda like youtube, when you are on a video and you hover over someone's avatar it will show a small box with their channel art and things. Here is a photo of what i'm currently getting <a href="http://prntscr.com/3te4an" rel="nofollow">screenshot</a>. Here are my codes for the two divs:<br>
  <strong>circular div</strong></p>
  
  <pre><code>#staff-info {
      width: 400px;
      height: 300px;
      background: #999;
      border: 1px solid #333;
      border-radius: 6px;
      margin: 0 auto;
      position: relative;
  }
  </code></pre>
  
  <p><strong>staff boxes</strong></p>
  
  <pre><code>#staff {
      width: 256px;
      height: 60px;
      margin: 7px 4px 7px 4px;
      background: #fff;
      display: inline-block;
      background: #f3f6f9;
  }
  .staff-avatar {
      width: 40px;
      height: 40px;
      padding: 10px;
      display: inline-block;
      float: left;
  }
  .staff-name {
      display: inline-block;
      padding-top: 8px;
  }
  .staff-job {
      padding-top: -100px;
      font-size: 12px;
  }
  </code></pre>
  
  <p><strong>Grey area (main div)</strong></p>
  
  <pre><code>#youtuber-about {
      width: 890px;
      height: auto;
      background: #d5d3d3;
      margin-left: auto;
      margin-right: auto;
      font-size: 16px;
      padding: 10px 0px 10px 10px;
      display: inline-block;
  }
  </code></pre>
  
  <p><strong>html for the divs</strong></p>
  
  <pre><code>&lt;div id="staff-info"&gt;yolo&lt;/div&gt;
          &lt;div id="youtuber-about" style="color: #333;"&gt;Our Staff&lt;br&gt;
              &lt;?php
              foreach ($staff as $staff) {
                  echo '
                  &lt;div id="staff"&gt;&lt;img src="'.$staff['avatar'].'" class="staff-avatar"&gt;&lt;div class="staff-name"&gt;'.$staff['name'].'&lt;/div&gt;&lt;div class="staff-job"&gt;'.$staff['job'].'&lt;/div&gt;&lt;/div&gt;';
              }
              ?&gt;
          &lt;/div&gt;
  </code></pre>