gpt4 book ai didi

html - Z-Index 堆叠?

转载 作者:太空宇宙 更新时间:2023-11-04 14:13:58 26 4
gpt4 key购买 nike

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

谢谢!

最佳答案

Tge 原因是 pullbar div 继承了和 body 相同的 z-index。让 pullbar 和 body 处于同一水平...

  <body>
</body>

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

这段代码没问题。但是不建议把pullbar div做成和body一样的水平。使用另一个div like.some main div代替body,然后使pullbar div与主div水平

关于html - Z-Index 堆叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20508165/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com