是否可以将伪元素的堆叠顺序设置为其父元素以下？

Z时代
2024-01-10
分类：问答

我正在尝试使用:after伪元素CSS选择器设置元素的样式

#element {
    position: relative;
    z-index: 1;
}
#element::after {
    position:relative;
    z-index: 0;
    content: " ";
    position: absolute;
    width: 100px;
    height: 100px;
}

似乎::after元素不能低于元素本身。

有没有办法使伪元素低于元素本身？

回答：

伪元素被视为其关联元素的后代。要将伪元素放置在其父元素下方，您必须创建一个新的堆栈上下文以更改默认的堆栈顺序。放置伪元素（绝对）并分配z索引值（不是“ auto”）会创建新的堆叠上下文。

#element {
    position: relative;  /* optional */
    width: 100px;
    height: 100px;
    background-color: blue;
}
#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;
    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}
<!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>