我的标题下方的内容将自己定位在我给出更高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>
<header>Some text<br><br>Some more text</header>
<div>My div</div>
</body>我试着在我的内容上放一个否定的z-index，这就解决了问题，但后来我的内容中的所有元素都变得不活动了。
(例如，我再也不能点击或悬停任何东西了。(
使用z-index时，请确保设置元素的位置。否则会产生奇怪的行为。
因此，这里只需将position: relative添加到header中，它就会很好地工作(即使在将负margin添加到div的情况下(。
在这个特定的例子中，不需要在div中添加position: relative(以解决问题(，但这样做不会出错。当涉及到玩z索引时，设置重叠元素的位置有助于浏览器更好地理解上下文。
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;
}
BTW，这是一篇非常好的文章，涵盖了所有的z索引问题：你的z索引不起作用的四个原因(以及如何修复它(
为了补充Biswajit的答案，这里有一个很好的解释(堆栈溢出答案(，说明为什么需要位置。