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

小编典典

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

css

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

#element {
    position: relative;
    z-index: 1;
}

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

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

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

阅读 357

2020-05-16

共1个答案

小编典典

伪元素被视为其关联元素的后代。要将伪元素放置在其父元素下方，您必须创建一个新的堆栈上下文以更改默认的堆栈顺序。放置伪元素（绝对）并分配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>

2020-05-16