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