时间戳

首页 > 解决方案 > 为什么将 position:absolute 的元素放在 ::after 伪元素后面

html - 为什么将 position:absolute 的元素放在 ::after 伪元素后面

问题描述

我是 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 后面反之亦然，位置：absolute。我对么？

标签： htmlcss

解决方案

在内容类中使用 z-index 属性，并且必须大于零，默认为零。

.content{
position: absolute;
z-index:2;
}

推荐阅读