z-index for pseudo：未放置在父元素下面

Question

我正试图将一个元素夹在＆＃39;之前＆＃39;和＆＃39;：之后＆​​＃39;然而，尽管在＆＃39;之后将z-index设置为-1，然后使用伪元素。它仍然出现在父母之上。

在下面的示例中，红色应位于顶部，绿色位于中间，蓝色位于底部。

看到这个小提琴：https://jsfiddle.net/zL1yz86f/2/

HTML：

<div></div> 

CSS：

div {
        background: green;
        position: relative;
        z-index: 10;
        width: 30%;
        height: 200px;
        float: left;
        margin-right: 3%}

    div:before {
        content: "";
        height: 0;
        width: 0;
        border-top: 200px solid red;
        border-right: 200px solid transparent;
        position: absolute;
        top: -20px;
        left: -10px;
        z-index: 20;
    }

    div:after {
        content: "";
        height: 200px;
        width: 200px;
        background: blue;
        position: absolute;
        top: -20px;
        left: -10px;
        z-index: -1;
    }

Answer 1

删除父级的z-index

这将使伪元素具有自己的堆叠上下文（因为已经应用了position: absolute）。这是一个更新的fiddle。希望这有帮助！