伪元素被视为其关联元素的后代。要将伪元素放置在其父元素下方，您必须创建一个新的堆栈上下文以更改默认的堆栈顺序。 放置伪元素（绝对）并分配z索引值（不是“ auto”）会创建新的堆叠上下文。
#element { position: relative; width: 100px; height: 100px; background-color: blue;}#element::after { content: ""; width: 150px; height: 150px; background-color: red; position: absolute; z-index: -1; }<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Position a pseudo-element below its parent</title></head><body> <div id="element"> </div></body></html>
