[英]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.