Html pseudo:after的z索引未放置在父元素下

我试图将一个元素夹在“：before”和“：after”伪元素之间，但是尽管在“：after”上将z-index设置为-1，它仍然显示在父元素的顶部

在下面的例子中，红色应该在顶部，中间是绿色，底部是蓝色。< /P> 看这把小提琴：

HTML:

---

删除父级的

z索引

---

这将为伪元素提供它们自己的堆叠上下文（正如您已经应用的

position:absolute

）。这里有一个更新的。希望这有帮助

无法告诉您原因，但删除格林的z索引可以修复它。相关的：

<div></div> 

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;
    }