Question

我正在尝试使用CSS中的z-index将这个灰色栏放在背景中的紫色div下面（然后在点击按钮时用JavaScript拉出......但这样可行！）。

这就是现在的样子：

image of it now

该区域的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的原因是拉杆div继承了与身体相同的z-index。使拉杆与身体相同......

  <body>
  </body>

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

此代码没问题。但不建议将拉杆div设置为与车身相同的高度。使用另一个div like.some main div代替body，然后将pullbar 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-index也将与#body处于同一级别。

请看这里：z-index on absolutely positioned nested elements

Z-Index堆叠？

2 个答案: