即使使用 z-index，我的文本也没有显示在具有模糊效果的容器上：2

Question

我的h1和h2文本没有显示它们应该在的位置：在我的容器上。由于某种原因，它们实际上隐藏在我模糊的容器后面，我无法弄清楚。

即使将z-index: 2放入我的.blurred-container .content h1css 中，我的内容实际上仍然隐藏，我不知道为什么。

<style>
.blurred-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: url("https://images.unsplash.com/photo-1565361587753-6c55978411d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80");
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
.blurred-container .content {
position: relative;
overflow: hidden;
box-shadow: 0 5px 32px rgba(0, 0, 0, 0.5);
padding: 0;
max-width: 600px;
background: inherit;
border-radius: 12px;
}
.blurred-container .content::before {
content: "";
position: absolute;
left:-20px;
right:-20px;
top:-20px;
bottom:-20px;
background: inherit;
filter: blur(20px);
}
.blurred-container .content h1 {
z-index: 2;
}
.blurred-container .content h2 {
z-index: 2;
}
</style>
<div class="blurred-container">
<div class="content">
<h1>CONTENT</h1>
<h2>content</h2>
</div>
</div>

我希望h1和h2中的此文本可见。伙计们，我错过了什么？提前谢谢。这是代码笔，如果它有帮助的话

Answer 1

z-index设置定位元素的 z 顺序。对于要定位的元素，它需要一个位置值，而不是默认值 static。您的标题使用静态定位，因此z-index不适用。

在特定情况下，您需要将定位更改为relative.

.blurred-container .content h1,
.blurred-container .content h2 {
position: relative;
z-index: 2;
}