Questioning - position/stack of pseudo elements, Trying to position pseudo elements behind their parent Options

[scooble]

I am a bit of a newbie with CSS, but I know some of the basics.

I am trying to position a pseudo element (:after) behind the main element (red box in front of blue box)

Sounds pretty simple enough, and everything works fine until I apply a transform to the main element.
As soon as I do this, the pseudo element appears on top of the main element (blue box in front of red box).
I tried adjusting the Z index , but it makes no difference.

Here is the simple code.

CODE

        .box {            
            position: relative;
            width: 300px;  
            height: 300px;
            background-color: rgb(255, 0, 0);
            transform: translate(10px, 10px);                      
        }

        .box::after {
            position: absolute;
            content: '';            
            top: 0;
            left: -1%;
            width: 100%;
            height: 100%;
            background-color: blue;            
            z-index: -10;            
        }

It seems that when I remove ' transform: translate(10px, 10px);' (or any other kind of transform) the red box is back on top of the blue box.

Is this a 'feature' of pseudo elements?

[Christian J]

https://stackoverflow.com/questions/2085145...852489#20852489 has a good explanation.

Apparently the "transform" property creates a new stacking context, so the negative "z-index" value only applies to children of the .box element. As a workaround you could instead apply "transform" on another container element, outside .box.