title: css - make div be above page content
body: <p>I have this drop down menu, that when it's hovered some of the content is going behind another div. It looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/rGGKz.jpg" alt="enter image description here"></p>
  
  <p>The css for the menu is like this:</p>
  
  <pre><code>.nav-m {
          height: 50px;
          width: 60px;
          display: block;
          position: absolute;
          z-index: 9999;
          overflow-y: hidden;
          text-align: center;
          position: absolute;
      }
  
      .nav-m:hover {
          width: 140px;
          height: 210px;
      }
  
      .nav-m a {
          display: none;
          text-indent: -9999px;
          position: relative;
          height: 20px;
          padding: 13px 0;
          color: #fff !important;
      }
  
      nav a:first-child:hover {
          text-indent: -9999px;
      }
  
      .nav-m:hover&gt;a {
          display: block;
      }
  
      .nav-m:hover&gt;a:first-child:after {
          color: #6daeaf;
          background: #505664;
      }
  
      .nav-m a:first-child {
          display: block;
          text-align: center;
          margin-bottom: 16px;
          cursor: default;
      }
  
      .nav-m a:after {
          position: absolute;
          top: 0;
          padding: 12px 0;
          width: 60px;
          color: #fff;
          font-family: 'icons';
          font-size: 24px;
          display: block;
          text-indent: 0;
          background: #6daeaf;
      }
  
      nav a:hover {
          text-indent: 0px;
          text-align: left;
          margin-left: 70px;
      }
  
      .nav-m a:hover:after {
          color: #999;
          background: #fff;
          text-align: center;
          margin-left: -70px;
      }
  
      .nav-m a:first-child:before {
          position: absolute;
          text-indent: 0;
          top: 55px;
          left: 23px;
          content: "";
          width: 0; 
          height: 0; 
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-bottom: 7px solid #6daeaf;
      }
  
      .nav-m a:first-child:hover:before {
          margin-left: -70px;
      }
  
      .nav-m a:first-child:after {
          left: 0;
          content: "m";
          background: #656d7e;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
      }
  
      .nav-m a:nth-child(2):after {
          content: "p";
          -webkit-border-top-left-radius: 5px;
          -webkit-border-top-right-radius: 5px;
          -moz-border-radius-topleft: 5px;
          -moz-border-radius-topright: 5px;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
      }
  
      .nav-m a:nth-child(3):after {
          content: "s";
      }
  
      .nav-m a:last-child:after {
          content: "e";
          -webkit-border-bottom-left-radius: 5px;
          -webkit-border-bottom-right-radius: 5px;
          -moz-border-radius-bottomleft: 5px;
          -moz-border-radius-bottomright: 5px;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
      }
  </code></pre>
  
  <p>Below the menu div is .container, .row and then a div with class='span12' (I'm using bootstrap)</p>
  
  <p>The HTML looks like this:</p>
  
  <pre><code>&lt;div id="topbg"&gt;
   &lt;div class="span9"&gt;span9 content here&lt;/div&gt;
   &lt;div class="span3 avatar-holder" &gt;
  
  
    &lt;nav class="nav-m" onmouseover=""&gt;
          &lt;a href="#" title="Menu"&gt;Menu&lt;/a&gt;
          &lt;a href="#" title="Account"&gt;Account&lt;/a&gt;
          &lt;a href="#" title="Settings"&gt;Settings&lt;/a&gt;
          &lt;a href="#" title="Email"&gt;Email&lt;/a&gt;
          &lt;a href="#" title="Email"&gt;Email&lt;/a&gt;
          &lt;a href="#" title="Email"&gt;Email&lt;/a&gt;
          &lt;a href="#" title="Email"&gt;Email&lt;/a&gt;
          &lt;a href="#" title="Email"&gt;Email&lt;/a&gt;
          &lt;a href="#" title="Email"&gt;Email&lt;/a&gt;
          &lt;a href="#" title="Email"&gt;Email&lt;/a&gt;
      &lt;/nav&gt;
  
      &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;&lt;!--end row--&gt;  
  &lt;/div&gt;&lt;!--end topbg--&gt;
  
  &lt;div class='container' style='margin-top:20px;'&gt;
  
  &lt;div class='row'&gt;
  
      &lt;div class='span12' style='margin:0;'&gt;
  span 12 content
  
  &lt;/div&gt;&lt;!--end span12--&gt;
  &lt;/div&gt;&lt;!--end row--&gt;
  </code></pre>
  
  <p>So, I've tried setting the z-index to -1 on the following divs: .row, .container, .span12 with no luck. I've also tried settings the overflow to visible on every possible div. I can't find the problem here. </p>
  
  <p>Can anyone help me out?</p>