即使在使用 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 设置 定位 元素的 z 顺序。对于要定位的元素，它需要一个除默认静态之外的位置值。您的标题使用静态定位，因此 z-index 不适用。

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

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