Z-index with bootstrap - html

Question

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.
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.)
Z-position isn't working with me.
HTML
<div class="row ">
<div id="cube1" class="col-md-4 ">
<h1>The Company</h1>
<p><i class="fa fa-building-o fa-9x"></i></p>
</div>
<div id="cube2" class="col-md-4">
<h1>Our People</h1>
<p><i class="fa fa-heart fa-9x"></i></p>
</div>
<div id="cube3" class="col-md-4">
<h1>Code</h1>
<p><i class="fa fa-code fa-9x"></i></p>
</div>
<div id="cube4" class="col-md-4">
<h1>Our Brand</h1>
<p><i class="fa fa-barcode fa-9x"></i></p>
</div>
<div id="cube5" class="col-md-4">
<h1>Our Technology</h1>
<p><i class="fa fa-connectdevelop fa-9x"></i></p>
</div>
<div id="cube6" class="col-md-4">
<h1>What Moves Us</h1>
<p><i class="fa fa-cogs fa-9x"></i></p>
</div>
<div id="cube7" class="col-md-4 ">
<h1>Our Clients</h1>
<p><i class="fa fa-exclamation fa-9x"></i></p>
</div>
<div id="cube8" class="col-md-4">
<h1>Contact Us</h1>
<p><i class="fa fa-envelope-o fa-9x"></i></p>
</div>
<div id="cube9" class="col-md-4">
<h1>Address</h1>
<p><i class="fa fa-compass fa-9x"></i></p>
</div>
</div>
CSS
.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;
}
js
$(document).ready(function(){
var cores = Please.make_color({
base_color:'aliceblue',
colors_returned:9
})
cores[4]='#32BAD3';
for (i=0; i<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());
});
});
What i want to achieve is when a user click on one of the divs, it will expand covering all the viewport.
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?
Sources:
CSS I want a div to be on top of everything
Z-Index with different parents
CSS Z-Index with Gradient Background

Answer 1

I have similiar problems with bootstrap but usually it has to do with the way css files are arranged in your site.
A dirty solution is
z-index: 300 !important;
to make sure other css rules get overwritten but I would avoid that when possible.
Where exactly did you put the z-index rules?