CSS 背景色在最上层
在 CSS 中，我们可以使用 background-color 属性为 HTML 元素添加背景色。默认情况下，背景色会与元素内容重叠并进行绘制。但是如果我们想将背景色放在所有其他元素的上面呢？
可以使用 z-index 属性来定义元素的层次关系。元素的 z-index 值越高，它的层次就越高，将出现在其他元素的上面。
但是对于背景色这样的属性，设置了 z-index 并不能直接影响其层次。这时我们可以使用 ::before 或 ::after 伪元素。
例如，我们可以创建一个空的伪元素为元素添加背景。示例代码如下：

html
<p class="text">这是一段文本。</p>

css
.text {
position: relative;
z-index: 1;
}
.text::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(255, 0, 0, 0.5);
z-index: -1;
}

在这个例子中，我们为 p 元素设置了 position: relative，以便使 ::before 伪元素相对于该元素进行定位。然后我们在 ::before 中添加了一个背景色，并将其 z-index 设置为 -1，这将使其出现在 p 元素下面。
应该注意的是，伪元素的 z-index 值不能为 auto，否则它将不能放置在所有其他元素的上面。
正如在本文中所示，使用 ::before 或 ::after 伪元素是一种将背景色放在所有其他元素的上面的简单方法。