gpt4 book ai didi

html - Z-index 堆叠上下文

转载 作者:太空宇宙 更新时间:2023-11-03 22:55:50 25 4
gpt4 key购买 nike

我遇到了z-index并不像听起来那么简单的问题。

基本上阅读了我找到的所有相关内容后,我仍然无法找到解决方案。所以这是我的问题:

JSFiddle

<div id="first">
<div id="middlelayer">
2
</div>
</div>
<div id="second">
<div id="toplayer">
1
</div>
<div id="lowestlayer">
3
</div>
</div>

我想要一个不同父级 (#middlelayer) 的 Div 位于另外两个 Div(#toplayer 和 #loweSTLayer)之间。我基本上对 z 索引的每个组合进行了实验,还尝试了不透明度的解决方法:.99,在此处描述:

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

到目前为止似乎没有任何效果,我希望你能帮助我。

非常感谢您!

最佳答案

.toplayer {
width: 120px;
background-color: green;
position: fixed;
z-index: 3;
}

#middlelayer {
width: 140px;
background-color: blue;
position: fixed;
z-index: 2;
}

#lowestlayer {
width: 160px;
background-color: yellow;
position: fixed;
}
<div id="first" >      
<div id="middlelayer">
middle
</div>
</div>
<div id="second">
<div id="second2">
<div id="lowestlayer">
low
</div>
<div class="toplayer">
top
</div>
</div>
</div>

我只是将 z-index:1z-index:3 添加到每个元素,它似乎产生了预期的效果。

编辑:

从我的答案中删除了 JSFiddle 并将其替换为代码片段。

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

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