<分区>
<分区>
我的 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
最佳答案
z-index 设置 positioned 元素的 z 顺序。对于要定位的元素，它需要一个不同于默认值 static 的位置值。您的标题使用静态定位，因此 z-index 不适用。
在您的特定情况下，您需要将定位更改为relative。
.blurred-container .content h1,
.blurred-container .content h2 {
position: relative;
z-index: 2;
}
关于html - 即使在使用 z-index : 2 之后，我的文本也没有以模糊效果显示在我的容器上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57438568/