Z-index with bootstrap

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

Sounds like you want a `modal` div....I think there is an option for that in Bootstrap. — Paulie_D, Feb 23 '15 at 15:25
@Paulie_D, I have a modal div for my contact form. It's a bit different. What i want is the div cube (1 to 9) to becomes bigger and bigger until it cover the others cubes. The size thing can be achieved with JQuery UI (.addClass() or .switchClass(). I have already the size figured, but the other divs remain there. I could use css "display:none" but i want the div to "grow" on top of the others. — andrescpacheco, Feb 23 '15 at 15:29

score 2 · Answer 1 · answered Feb 23 '15 at 15:30

2

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?

answered Feb 23 '15 at 15:30

DonMB

2,550
3
28
59

The !important worked for me in the case with dynamically generated elements, which would lay on top of the "top" element w/out that reference. – access_granted Oct 20 '17 at 23:48

Z-index with bootstrap

1 Answers1