這個問題在這里已經有了答案： 為什么 z-index 不起作用？ (6 個回答) 5 小時前關閉。
非常奇怪的行為，我的標題下方的內容將自身定位在我給了更高 z-index 的標題上方。因此，它隱藏了標題上的陰影。見片段。當您在下面的內容上添加負邊距時，甚至會出現更奇怪的行為：您可以看到標題文本，但現在具有內容的背景顏色。我勒個去？
header {
z-index: 999999;
background-color:green;
width: 100%;
text-align: center;
box-shadow: 0 0ex 2ex hsl(0, 0%, 0%);
vertical-align: middle;
}
div {
background: red;
height: 8em;
/*margin-top: -5em;*/
}<body class="">
<header> Some textw<br><br>Some more text</header>
<div>My div</div>
</body>我嘗試在我的內容上放置一個負的 z-index 并解決了問題，但隨后我的內容中的所有元素都變得不活躍。例如不能再點擊或懸停任何東西..
uj5u.com熱心網友回復：
z-index 屬性僅適用于定位元素。這些措施包括position: relative，position: absolute，position: fixed，和position: sticky elements。
嘗試給你的 div#middle一個position: relative.
header {
position: relative;
z-index: 999999;
background-color:green;
width: 100%;
text-align: center;
box-shadow: 0 0ex 2ex hsl(0, 0%, 0%);
vertical-align: middle;
}
uj5u.com熱心網友回復：
使用 時z-index，請確保為元素設定位置。否則它會產生奇怪的行為。
所以在這里只需添加position: relative到header，它會作業很好（甚至在情況下，你是消極添加margin到div）。
在這個特殊的例子，沒有必要添加position: relative到div（為了解決這個問題），但你不會犯錯誤這樣做。在使用 z-index 時，為重疊元素設定位置有助于瀏覽器更好地理解背景關系。
header {
z-index: 999999;
background-color: green;
width: 100%;
text-align: center;
box-shadow: 0 0ex 2ex hsl(0, 0%, 0%);
vertical-align: middle;
position: relative;
}
div {
position: relative;
background: red;
height: 8em;
margin-top: -5em;
}
順便說一句，這是一篇涵蓋所有 z-index 問題的非常好的文章：https : //coder-coder.com/z-index-isnt-working/
uj5u.com熱心網友回復：
要添加 Biswajit 答案，這里有一個很好的解釋，說明為什么需要位置。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386922.html
下一篇：如何使用JS洗掉/關閉Div？