html - Z索引堆叠？

我正在尝试使用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;
}

谢谢！

最佳答案

由于相对元素（也嵌套了），因此嵌套了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 on absolutely positioned nested elements

关于html - Z索引堆叠？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20508165/