html - 带 Bootstrap 的 Z 索引

Question

我一直在寻找一种方法使我的 div 位于所有 div 之上(覆盖所有 div)。事实上，我认为我可以解决隐藏其他 div 的问题，但我认为应该有另一种解决方案。

我正在使用 bootstrap 制作 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 时，它会展开并覆盖所有视口(viewport)。

我在这里读了一些帖子，他们说 Z-index 只有在我有一个非静态的非静态定位方案时才有效。我可以考虑使用 Bootstrap 类“col-md-4”使我的网站成为静态方案吗？

资料来源: CSS I want a div to be on top of everything

Z-Index with different parents

CSS Z-Index with Gradient Background

Answer 1

我在使用 bootstrap 时遇到了类似的问题，但通常这与您站点中 css 文件的排列方式有关。一个肮脏的解决方案是

z-index: 300 !important;

确保其他 css 规则被覆盖，但我会尽可能避免这种情况。您究竟将 z-index 规则放在哪里？