带引导程序的Z索引

我一直在寻找一种方法让我的div在所有div上（覆盖它们全部）。事实上，我认为我可以解决这个隐藏其他div的，但我认为应该有另一种解决方案。带引导程序的Z索引

我使用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; 
}

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

});

我想要实现的是，当用户C舔其中一个divs，它将扩大覆盖所有的视口。

我在这里看到一些帖子，他们说Z-index只在我有非静态非静态定位方案时才起作用。我可以考虑使用引导类“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

来源

2015-02-23 andrescpacheco

听起来像你想'模态'分区....我认为这是在Bootstrap中的选项。 – 2015-02-23 15:25:14

http://getbootstrap.com/javascript/#modals – 2015-02-23 15:28:18

@Paulie_D，我的联系表单有一个模态div。这有点不同。我想要的是div cube（1到9）变得越来越大，直到它覆盖其他立方体。尺寸的东西可以通过JQuery UI（.addClass（）或.switchClass（）来实现。我已经计算出尺寸，但其他div仍然存在。我可以使用css“display：none”但我想要div在其他人的顶部“成长” – andrescpacheco 2015-02-23 15:29:37

我有引导similiar问题，但通常它与CSS文件被安排在您的网站的方式做。脏的解决方案是

z-index: 300 !important;

，以确保其它CSS规则被改写，但我会避免可能的情况下。你究竟在哪里放置了z-index规则？

来源

2015-02-23 15:30:14 DonMB

这个！对于我来说很重要，在动态生成元素的情况下，它将位于“top “元素w /出那个参考。 – 2017-10-20 23:48:47

带引导程序的Z索引

回答

相关问题