[英]z-index not working with elements whose parents are in fixed position
我有一个Web应用程序，具有上下两个元素（ div ），它们都具有position: fixed 。 这些元素中的每个元素都有子元素（弹出窗口），它们的position: fixed也都是position: fixed 。
我想将弹出框放在父元素上。 但是，由于我使用position: fixed ，因此z-index属性无法正常工作，因为它是从父级继承的。
我看到在Stack-overflow中提出了类似的问题，但是没有一个提供此问题的解决方案。
请参阅以下网址的html / css： https ： //jsfiddle.net/pLsdspon/
<html> <head></head> <body style="height: 100%;"> <div style=" background-color: red; position: fixed; display: block; width: 100%; height: 50%; top: 0%; z-index: 2; "> Top <div style=" background-color: pink; position: fixed; display: block; width: 80px; height: 200px; top: 40%; left: 100px; z-index: 20; "> PopUp-Top - Need to be on top! </div> </div> <div style=" background-color: green; position: fixed; display: block; width: 100%; height: 50%; top: 50%; z-index: 2; "> Bottom <div style=" background-color: lightgreen; position: fixed; display: block; width: 80px; height: 200px; top: 40%; left: 200px; z-index: 20; "> PopUp-Bottom - Need to be on top! </div> </div> </body> </html>
z-index无法按您希望的方式工作，因为您将div嵌套在div中，而不是因为位置已固定。 为什么不将popup div放置在其他div的外部（上）？ https://jsfiddle.net/7efx38um/1/
<html> <head></head> <body style="height: 100%;"> <div style=" background-color: red; position: fixed; display: block; width: 100%; height: 50%; top: 0%; z-index: 1; "> Top </div> <div style=" background-color: pink; position: fixed; display: block; width: 80px; height: 200px; top: 40%; left: 100px; z-index: 20; "> PopUp-Top - Need to be on top! </div> <div style=" background-color: green; position: fixed; display: block; width: 100%; height: 50%; top: 50%; z-index: 1; "> Bottom </div> <div style=" background-color: lightgreen; position: fixed; display: block; width: 80px; height: 200px; top: 40%; left: 200px; z-index: 20; "> PopUp-Bottom - Need to be on top! </div> </body> </html>
另外，如果您希望横幅广告和div弹出广告都相互融合，则可以在两者之间创建虚拟div ，这样，弹出广告就不会使用与横幅广告相同的样式了；）
“
一个简单的解决方案是，我试图做的事是根本无法实现的。
#Krypton的答案确实可以通过更改html来解决此问题，但是在我的情况下，无法更改html顺序。
元素的顺序称为堆叠顺序 ，堆叠顺序为：
1.如果没有z-index或position，则堆叠顺序与html标记顺序相同。
2.所有定位的元素（ relative ， absolute和fixed ）都出现在所有未定位的元素（ static ）的顶部。
3. z-index仅适用于定位的元素，它将创建Stacking Context。
堆叠上下文
如果满足以下条件之一，则具有共同父元素的元素组将创建堆栈上下文 ：
1.根文档元素（ <html>元素）。
2.具有z-index的定位元素
3.不透明度小于1的元素（大多数Web开发人员都不知道）
在堆叠环境在堆叠顺序一起移动，这意味着如果元素的所有元素a内部铆接上下文A ， 不能上述元素b内铆接上下文B ，如果堆叠顺序B较高的A ，即使元件“ a”的z索引为一百万。
更新 ：创建Stacking上下文的新CSS角色： transform ， filter ， css-region和pages_media 。
堆叠上下文中的顺序：
1.根元素
2.具有负z索引的定位元素。
3.没有按html标记的顺序定位元素
4.定位元素
5.根据z索引定位具有z索引的元素。
要解决此问题，我们需要创建一个新元素，该元素将创建一个新的堆叠上下文，其堆叠顺序比红色和绿色的div更高，并将弹出窗口放置在该元素内。
参考： 菲利普·沃尔顿 （ Philip Walton） 没有人告诉过您Z-Index的信息： https : //philipwalton.com/articles/what-no-one-told-you-about-z-index/
当父母固定且具有相同的z-index时，子元素的z-index不起作用？
[英]Child elements z-index not working when parents are fixed and have the same z-index?
对于没有固定/相对/绝对位置的元素，是否有z-index选项？
[英]Is there a z-index alternative for elements without a fixed/relatic/absolute position?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.