Bootstrap網格系統始終在前面

Question

我正在嘗試設計一個全屏菜單。 它的效果很好，但是當頁面本身包含引導網格系統時，網格始終位於最前面。 使用我發現的Google Chrome瀏覽器開發人員工具，是由於所有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 class是顯示或隱藏帶有class menu的div的整個導航。 div隱藏類body-content的完整內容（至少應該如此）。

所以

1. 為什么所有col class都設置為relative ？ 我不想以后再得到任何驚喜。
2. 使網格系統在后台運行的可能性有哪些（或正確的解決方案）？

Answer 1

position: relative在需要重新排列列時，在Bootstrap中是position: relative 。 這可以通過使用col-sm-push-4或類似的類來完成 。 我不建議您覆蓋它，因為這會使您的項目將來成為維護的噩夢。 最好使用被設計為覆蓋繪畫順序的屬性： z-index 。 使用此屬性時要小心，因為它容易被濫用。

首先，您的案子只需要兩個規則

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

position: relative是必需的，因為z-index不會影響position: static元素（默認值）。 z-index只需為1 。 如果您發現自己需要將其設置為非常高的水平（例如1000s），則可能只需要設置.body-content的z-index ，在這種情況下，只需將其設置為.body-content上的1和2 。 .header 。

無論哪種方式，這都應該是您所需要的。