帶引導的Z索引

Question

我一直在尋找一種使我的div在所有div之上（覆蓋所有div）的方法。 事實上，我認為我可以解決這個隱藏其他div的問題，但是我認為應該有另一個解決方案。

我正在使用引導程序制作3x3網格。 因此，我有一行，並且在其中有9個div，其中的類為“ col-md-4”（我只希望它與此尺寸配合使用。）

Z位置不適用於我。

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());
});

});

我要實現的是，當用戶單擊div之一時，它將展開並覆蓋所有視口。

我在這里閱讀了一些帖子，他們說Z-index僅在我具有非靜態非靜態定位方案時才有效。 我可以考慮使用引導類“ col-md-4”使我的網站成為靜態方案嗎？

資料來源： CSS我希望div位於一切之上

與不同父母的Z索引

具有漸變背景的CSS Z-Index

Answer 1

我在啟動時遇到類似的問題，但通常與CSS文件在您網站中的排列方式有關。 一個骯臟的解決方案是

z-index: 300 !important;

以確保其他CSS規則被覆蓋，但我會盡可能避免這種情況。 您將z-index規則放在哪里？