css - 绝对 :position and z-index:1 element 之前/之后

Question

如何在 position: absolute 元素下安排 :before 或 :after 伪元素 position: absolute 和 z-index: -1 > 和 z-index: 1

https://jsfiddle.net/x5x6ye97/2/

#element { 
    position: absolute;
    z-index: 1;
    
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;
    position: absolute;
    top: 20px;
    z-index: -1; 
}

<div id="element"></div>

Answer 1

嗯，我想你想实现这个...

下面是工作代码-

#element { 
    position: relative;  /* optional */
    width: 100px;
    height: 100px;
    background-color: green;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: yellow;
    position: absolute;
    z-index: -1;  
}

<div id="element"></div>

希望这对您有所帮助:)