Html Z指数叠加？_Html_Css_Z Index

Html Z指数叠加？

html css

Html Z指数叠加？,html,css,z-index,Html,Css,Z Index,我正在尝试使用CSS中的z-index将这个灰色条塞进背景中的紫色div下面（然后在单击按钮时使用JavaScript拉出……但这是可行的！）这就是它现在的样子：该区域的HTML如下所示： <div id="body"> <div id="container"> <header> ... header content ... </header>

我正在尝试使用CSS中的z-index将这个灰色条塞进背景中的紫色div下面（然后在单击按钮时使用JavaScript拉出……但这是可行的！）

这就是它现在的样子：

该区域的HTML如下所示：

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

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


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

谢谢

z索引是嵌套的，因为相对元素（也嵌套）。因此，您可以将拉杆移动到与#body相同的标高：


... 标题内容。。。
... pullBar内容。。。

或者您可以使用pullbar上的绝对定位将其放置在“新”层中，这样z索引也将与#body处于同一级别

请看这里：

Tge原因是pullbar div继承了与body相同的z索引。请将pullbar设置为与body相同的级别

  <body>
  </body>

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

这个代码没问题。但不建议将拉杆div设置为与车身相同的标高。使用另一个div，如。一些主div代替主体，然后使拉杆div与主div平齐

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

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

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

  <body>
  </body>

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