Z索引堆疊？

Question

我正在嘗試使用CSS中的z-index在背景中的紫色div下使這個灰色條形填充（然后在單擊按鈕時使用JavaScript抽出...但這是可行的！）。

這是現在的樣子：

現在的形象

該區域的HTML如下所示：

<div id="body">
        <div id="container">

            <header>
                ... header content ...
            </header>


            <div id="pullBar">
                ... pullBar content ...
            </div>
        </div>
</div>

這就是#pullbar和#body的CSS外觀：

#pullBar{
    padding:7px 15px;
    height:108px;
    width:90%;
    background:#BCC6CC;
    margin-left:-90%;
    position: relative;
    z-index: 1;
}

#body {
    width: 100%;
    margin: 0;
    background:#401445;
    position: relative;
    z-index: 5;
}

謝謝！

Answer 1

Tge的原因是Pullbar div繼承了與body相同的z索引。

  <body>
  </body>

  <div id="pullbar">
  </div>

這段代碼可以。 但是不建議將Pullbar div設置為與主體相同的水平。 使用另一個div這樣的主div代替body，然后使拉桿div與主div處於同一水平

Answer 2

由於相對元素（也嵌套了），因此嵌套了z-index。 因此，您可以將拉桿移動到與#body相同的位置：

<div id="body">
        <div id="container">

            <header>
                ... header content ...
            </header>
        </div>
</div>

<div id="pullBar">
    ... pullBar content ...
</div>

或者，您可以在拉桿上使用絕對定位將其放置在“新”層中，因此z索引也將與#body處於同一級別。

也可以在這里查看：絕對定位的嵌套元素上的z-index

Z索引堆疊？

問題描述

2 個解決方案

解決方案1
1 2013-12-11 00:38:14

解決方案2
0 已采納 2013-12-11 00:29:15

Z索引堆疊？

問題描述

2 個解決方案

解決方案1 1 2013-12-11 00:38:14

解決方案2 0 已采納 2013-12-11 00:29:15

解決方案1
1 2013-12-11 00:38:14

解決方案2
0 已采納 2013-12-11 00:29:15