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

Question

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

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

<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 中的这段文字可见。伙计们，我错过了什么？提前致谢。 Here's codepen, if it helps

Answer 1

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

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

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