<分区>
<分区>
我是 HTML 和 CSS 的新手，在做一些练习时，我遇到了一个问题，即我想创建具有模糊效果的网站，因此我创建了带有类展示的标题和内部标题我创建了带有类的 div内容。
<header class="showcase">
<div class="content">
<img src="img/pexels-photo-373912.jpeg" alt="Photo">
<h2 class="title">Welcome </h2>
<p class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, quidem!</p>
</div>
</header>
然后我用 css::after 伪元素创建了背景图像:
.showcase::after{
content:"";
background-image: url(img/action-america-architecture-378570.jpg);
background-size:cover;
background-position: center;
height: 100vh;
filter: blur(10px);
display: block;
transition: 1000ms;
}
所以，问题是当我将带有类内容的 div 的位置更改为绝对时
.content{
position: absolute;
}
然后那个 div 被放在::after background-image 后面。据我所知，::after 或::before 的位置默认为静态，因此它必须在 .content 后面与 position:absolute 相反。我说得对吗？
最佳答案
在内容类中使用 z-index 属性，它必须大于零，默认为零。
.content{
position: absolute;
z-index:2;
}
关于html - 为什么带有position:absolute的元素放在::after伪元素后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52679168/