z-index for pseudo :after not placed under parent element

Question

I am trying to sandwich an element between ':before' and ':after' pseudo elements, however despite setting z-index to -1 on the ':after' it still appears on top of the parent.

In the following example red should be on top, green in the middle, blue on the bottom.

See this fiddle: 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;
    }

Couldn't tell you why but removing green's z-index fixes it [fiddle](https://jsfiddle.net/zL1yz86f/4/). related: http://stackoverflow.com/questions/3032856/z-index-of-before-or-after-to-be-below-the-element-is-that-possible — DasBeasto, Jul 24 '15 at 17:05

score 2 · Accepted Answer · answered Jul 24 '15 at 17:06

2

Remove the z-index of the parent

That will give the pseudo elements will have their own stacking context (as you have position: absolute already applied). Here's an updated fiddle. Hope this helps!

answered Jul 24 '15 at 17:06

mac

858
1
6
11

z-index for pseudo :after not placed under parent element

1 Answers1