title: Z-index with bootstrap
body: <p>I've been looking for a way to make my div be on top of all div's (covering them all). In fact i think i could solve this hiding the other div's but i think there should be another solution.</p>
  
  <p>I'm using bootstrap to make a 3x3 grid. So, i have one row and inside it i have 9 div's with the class "col-md-4" (i just want this to work with this size.)</p>
  
  <p>Z-position isn't working with me.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="row "&gt;
              &lt;div id="cube1" class="col-md-4 "&gt;
                  &lt;h1&gt;The Company&lt;/h1&gt;
                  &lt;p&gt;&lt;i class="fa fa-building-o fa-9x"&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="cube2" class="col-md-4"&gt;
                  &lt;h1&gt;Our People&lt;/h1&gt;
                  &lt;p&gt;&lt;i class="fa fa-heart fa-9x"&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="cube3" class="col-md-4"&gt;
                  &lt;h1&gt;Code&lt;/h1&gt;
                  &lt;p&gt;&lt;i class="fa fa-code fa-9x"&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="cube4" class="col-md-4"&gt;
                  &lt;h1&gt;Our Brand&lt;/h1&gt;
                  &lt;p&gt;&lt;i class="fa fa-barcode fa-9x"&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="cube5" class="col-md-4"&gt;
                  &lt;h1&gt;Our Technology&lt;/h1&gt;
                  &lt;p&gt;&lt;i class="fa fa-connectdevelop fa-9x"&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="cube6" class="col-md-4"&gt;
                  &lt;h1&gt;What Moves Us&lt;/h1&gt;
                  &lt;p&gt;&lt;i class="fa fa-cogs fa-9x"&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="cube7" class="col-md-4 "&gt;
                  &lt;h1&gt;Our Clients&lt;/h1&gt;
                  &lt;p&gt;&lt;i class="fa fa-exclamation fa-9x"&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="cube8" class="col-md-4"&gt;
                  &lt;h1&gt;Contact Us&lt;/h1&gt;
                  &lt;p&gt;&lt;i class="fa fa-envelope-o fa-9x"&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="cube9" class="col-md-4"&gt;
                  &lt;h1&gt;Address&lt;/h1&gt;
                  &lt;p&gt;&lt;i class="fa fa-compass fa-9x"&gt;&lt;/i&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.row {
      float: left;
      height: 100%;
      color: #fff;
      width:calc(100% - 250px); /*250px is the size of left menu */
  }
  
  .cube {
      height: calc(100%/3);
  }
  
  .teste {
  z-index: 300 !important; 
  }
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>$(document).ready(function(){
  
  
      var cores = Please.make_color({
          base_color:'aliceblue',
          colors_returned:9
          })
      cores[4]='#32BAD3';
      for (i=0; i&lt;10; i++)
      {
          $('#cube'+ (i+1)).css('background-color',cores[i])
      }
  
  
  $('.cube').click(function() {
    $( this ).addClass( "teste", 1000, "easeOutBounce" );
    $(this).width($('#rightmenu').width()-280);
    $(this).height($('#rightmenu').height());
  });
  
  });
  </code></pre>
  
  <p>What i want to achieve is when a user click on one of the divs, it will expand covering all the viewport.</p>
  
  <p>I read some posts here and they said that Z-index only work when i have a non-static non static positioning scheme. Can i consider that using the bootstrap classes "col-md-4" it makes my website a static scheme?</p>
  
  <p>Sources: 
  <a href="https://stackoverflow.com/questions/7421775/css-i-want-a-div-to-be-on-top-of-everything">CSS I want a div to be on top of everything</a></p>
  
  <p><a href="https://stackoverflow.com/questions/27329962/z-index-with-different-parents">Z-Index with different parents</a></p>
  
  <p><a href="https://stackoverflow.com/questions/24063807/css-z-index-with-gradient-background">CSS Z-Index with Gradient Background</a></p>