使用CSS和z-index創建頁面疊加層，然後將一個元素放置在疊加層頂部

Question

如何在疊加層上選擇要放置的特定元素時，如何在頁面上放置疊加層？

例如，在整個頁面上放置一個黑色疊加層，並讓按鈕置於其上。這將突出顯示該按鈕。你可以看到在intro.js

使用這種效果演示我已經試過：

我試圖在這個jsfiddle，但沒有奏效。

基本上我做一個覆蓋div做position: fixed; z-index: 100;，並讓其中一個元素照耀它通過它position: relative; z-index: 101;。但由於某種原因，我的內部div仍然顯示在覆蓋圖下方，而不是ontop，儘管z-index比覆蓋圖高。

如何定位這些元素使inner出現在overlay的頂部？

introJS如何似乎工作......針對z-index的規範

IntroJS具有用z-index覆蓋：99998，然後突出顯示的元素應用它，給它position: relative; z-index: 99999;類。我們不會認爲這會工作，鑑於如何堆疊工作......但它確實如此。

Answer 1

他原來的小提琴作品。這是一個着色問題。在顯示不同顏色的覆蓋圖時，請確保您使用的兩種顏色在外觀上不相似，以免再次出現此錯誤。

最終，position: relative確實創建新的堆疊上下文。試圖挽救面子沒有意義。

我會留在memorium下面我想狂妄自大，我知道的東西，intro.js沒有

佑男孩。這個很有趣。

所以你已經陷入了舊的stacking context problem。

總之，你想做什麼，你做不到。

Fiddle incoming!

在此琴：

我們改變一些CSS

.container { 
    background: red; 
    height: 100px; 
    position: relative; 
} 
.inner { 
    z-index: 99999; 
    position: absolute; 
    margin-top: 10px; 
    width: 100%; 
    background: green; 
    height: 30px; 
} 

這樣做有什麼

基本上，它會彈出你的籌碼與你的.overlay元素相等。

的.container元素上的position: relative確保當我們的.inner元素上彈出一個position:absolute，它保持它應該，但如果你刪除它，在.inner元素仍然會彈出你覆蓋上方。迷人，對嗎？我會在寫完之後解釋爲什麼要進行編輯，但是我希望在有人唾棄我的正確答案之前將其解決。

width:100%保持元素顯示，就好像它在流內正常呈現。

爲了讓它取代流內的其他元素，您需要採取額外的措施，並且我需要查看一些相關的示例。

這應該爲你解決它，但。