Question

我试图设计一个全屏菜单。它工作得非常好但是当页面本身包含一个自举网格系统时，网格总是在前面。使用我发现的Google Chromes开发人员工具，由于所有col-*包含

position: relative

如果我在开发者工具中禁用它（那么position是static），它就在后台。但我不能编辑整个bootstrap-css。

这是我的HTML（删除了太多内容）：

<div class="header">
    <input type="checkbox" id="toggle" style="display:none;" />
    <label class="toggle-btn toggle-btn__cross" for="toggle">
        <div class="bar"></div>
    </label>
    <label class="info">
        test
    </label>
    <div class="nav">
        <div class="menu">
            <!-- here is the menu -->
        </div>
    </div>
</div>

<div class="container body-content">
    <div class="wrap">

        <div class="row"> 
            <!-- THIS HERE IS ALWAYS IN FRONT DUE TO POSITION:RELATIVE -->
            <div class="col-xs-6">key</div>
            <div class="col-xs-6">value</div>

        </div>

    </div>
    <hr/>
    <footer>
        <p>footer</p>
    </footer>
</div>

header - 类是显示或隐藏div类menu的整个导航。 div隐藏了类body-content的完整内容（至少它应该）。

所以

是否有原因导致所有col - 类都设置为relative？我不想在以后发现任何不好的意外。
在后台获取网格系统的可能性（或正确的解决方案）是什么？

Answer 1

当您需要重新排列列时，

position: relative在Bootstrap中是必需的。这是通过使用col-sm-push-4 or similar classes来完成的。我不建议覆盖它，因为这可能会使您的项目在未来成为维护的噩梦。最好使用旨在覆盖painting order：z-index的属性。使用这个属性时要小心，因为它往往会被滥用很多。

首先，您只需要两个适用于您案例的规则

.header {
  position: relative;
  z-index: 1
}

position: relative是必需的，因为z-index不会影响position: static个元素（默认值）。 z-index只需1。如果您发现自己需要将其设置为荒谬的高级别（例如1000），您可能只需要设置z-index的{{1}}，在这种情况下，只需将其设置为.body-content 1上的.body-content和2。

无论哪种方式，这都应该是你需要的。

Bootstrap网格系统始终在前面

1 个答案: