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 偽元素是一種將背景色放在所有其他元素的上面的簡單方法。