Question

我一直在寻找一种方法让我的div在所有div之上（覆盖所有div）。事实上，我认为我可以解决这个隐藏其他div的问题，但我认为应该有另一个解决方案。

我使用bootstrap制作3x3网格。所以，我有一排，在里面我有9个div和＃34; col-md-4＆＃34; （我只想让它与这个尺寸一起工作。）

Z-position不与我合作。

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仅在我有非静态非静态定位方案时才有效。我可以考虑使用bootstrap类＆＃34; col-md-4＆＃34;它使我的网站成为一个静态的计划？

来源： 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规则？

带引导程序的Z-index

1 个答案: