將元素置於絕對定位的疊加層之上

如何將此中的h2元素置於疊加層之上？將元素置於絕對定位的疊加層之上

<h1>Hello Plunker!</h1> 
<h2>Above the overlay</h2> 
<div class="overlay"></div> 

.overlay { 
    position:absolute; 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    background-color: rgba(34, 34, 34, 0.8); 
    z-index:100; 
} 

h2 { 
    z-index:200; 
}

https://plnkr.co/edit/md2lIJCbhnEcc1XAbrne?p=preview

來源

2016-08-08 Lewis Diamond

始終在您的問題中包含相關代碼，而不僅僅是指向沙盒的鏈接。 –

你不需要用z-index設置絕對元素。只有你想要顯示的元素。因此，'.overlay'爲1的z-index就足夠了。更多的代碼會很好，因爲Ori建議，所以我們可以幫助您設置合適的可見優先級 – TGEE

...意味着您不需要覆蓋上的z-index，因爲它的位置是絕對的。只有通過'.overlay' – TGEE

變化從static元件的至relative/absolute/fixed的位置。 position: static（默認）不允許z-index（demo）：

h2 { 
    position: relative; 
    z-index:200; 
}

來源

2016-08-08 21:38:24

才能接受您的答案，因爲它確實適用於提供的問題/沙箱。不幸的是，對我來說，我的沙箱必須丟失一些重要的東西，因爲我已經嘗試過了，而且在我的實際情況下不起作用。一旦我找出不同之處，我會創建一個新問題。 –

在此處添加一個指向新問題的鏈接。這很有趣:) –

我實際上解決了這個問題。這是由於一個css選擇器將z-index應用到我想要帶到前臺的節點的遠端父節點。 Css不允許z-index較小的節點的子節點「超越」該節點。我不得不重新安排我的HTML層次結構，使得> * {z-index：X; }選擇器不會影響我的結果。 –

如果你的意思是，h2應在前覆蓋DIV，它的CSS更改爲：

h2 { 
    z-index: 200; 
    position: absolute; 
    color: white; 
}

（我添加了白色，使其更清晰，它不在後面overlay）

來源

2016-08-08 23:02:51 Johannes

將元素置於絕對定位的疊加層之上

回答

相關問題