[英]Z-index stacking context
我遇到了z-index听起来不那么简单的问题。
在基本阅读了我发现的所有内容之后,我仍然找不到解决方案。 所以这是我的问题:
<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介于其他两个Divs(#toplayer和#lowestlayer)之间。 我已经对z-indice的每种组合进行了实验结束,还尝试了不透明度为.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:1
添加到z-index:3
到每个元素,它似乎产生了预期的效果。
编辑:
从我的答案中删除了JSFiddle,并用代码段替换了它。
它似乎不是z-index
问题,而是定位问题之一。 由于您使用的是fixed
定位,因此请记住,元素是相对于视口定位的。 要获得想要设置在top
, top
和bottom
(最后要居中)的结果,请使用称为绝对居中的小技巧。
这是您可以在JSFiddle上看到的示例...
https://jsfiddle.net/kennethcss/smejLps4/
更新:
如果想要的结果只是简单地“层叠”元素,则只需要像这样应用z-index
...
我认为这就是您所需要的。 请检查以下代码。
#lowestlayer { opacity: .99; } #lowestlayer, #middlelayer, #toplayer { position: absolute; width: 100px; color: white; line-height: 100px; text-align: center; } #lowestlayer { z-index: 1; top: 20px; left: 20px; background: red; width: 200px; height: 200px; } #middlelayer { top: 45px; left: 45px; background: green; z-index: 2; width: 150px; height: 150px; } #toplayer { top: 70px; left: 70px; background: blue; z-index: 3; width: 100px; height: 100px; }
<div id="first"> <div id="middlelayer"> 2 </div> </div> <div id="second"> <div id="toplayer"> 1 </div> <div id="lowestlayer"> 3 </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.