CSS Pseudo Element Z-Index

Question

I have an element I would like to keep on top of all page content so I have set the z-index greater than 0. This element has a ::before pseudo-element that also needs to be above the page content. However, this pseudo-element needs to remain behind the main element.

I have seen numerous posts with a solution of setting the pseudo element's z-index to a negative value but this would then require me to set all other page content to a lower negative number.

I have attempted the following...

/*all other content*/ {
    z-index: 0;
}

.element {
    z-index: 2;
}

.element::before {
    z-index: 1;
}

...but the main element's z-index doesn't seem to be overwritten by a pseudo-element.

Here is a visual example. I would like the triangle behind the menu but above all other content.

The desired outcome is something like the following but with the other content being behind the triangle (notice cell border is visible in triangle)

How can I accomplish the desired effect?

@s.kuznetsov I havent made my way back to this issue quite yet but once I do I will let you know what solution I chose for my use case — Newb 4 You BB, Mar 17 '21 at 00:55

score 0 · Accepted Answer · answered Mar 15 '21 at 09:32

This cannot be done due to the overlay context.

I can suggest a hack, using transform-style: preserve-3d for the parent, and transform: translateZ(-1px) and position: absolute for the :before pseudo-class.

.element {
    margin: 0 auto;
    height: 100px;
    width: 100px;
    background-color: green;
    transform-style: preserve-3d;
    position: relative;
    color: white;
}

.element::before {
    content: ">";
    color: red;
    font-size: 64px;
    transform: translateZ(-1px);
    position: absolute;
    left: -15px;
}

<div class="container">
    <div class="element">TEST TEXT</div>
</div>

score 0 · Answer 2 · answered Mar 15 '21 at 12:27

NO NEED TO POSITION ARROW BEHIND MAIN ELEMENT

As @S.kuznetsow pointed out it is indeed not possible to position an element behind the parent element with z-index. His shown hack is the most elegant way to realize that effect by 3D-transform.

As I personally like to avoid not needed code here is another solution just for thinking ahead:

There really is no need to position arrow behind main element...
... as it just needed to be moved in right position ;-)

Make your arrow the size you need (normally that should be your target to control your layout) and move it with position: absolute next to the edge of the box. As the main element is allways on top the arrow also is allways on top. And as you moved it to right position there is no overlapping with main element.

For top or right positioning off the arrow use:

If arrow is done by CSS: double off border width
If arrow is done by image: width off arrow image

See example:

.democontent {
    position: relative;
    width: 400px;
    padding: 20px;
    background: gray;
}


.allwaysOnTop {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 10;
    padding: 20px 10px;
    background: white;

}

.allwaysOnTop::after {      

    /* move arrow to position */    
    content: '';
    display: block;
    position: absolute;      
    top: 10px;
    right: -40px;
  
    /* create arrow */  
    width: 0px;
    height: 0px;                
    border: 20px solid transparent;
    border-left: 20px solid red;
}

<div class="democontent">


    <div class="allwaysOnTop">
        Allways on top.
    </div>

    <p>
        Li Europan lingues es membres del sam familie.
        Lor separat existentie es un myth. Por scientie,
        musica, sport etc, litot Europa usa li sam vocabular.
        Li Europan lingues es membres del sam familie.
        Lor separat existentie es un myth. Por scientie, 
        musica, sport etc, litot Europa usa li sam vocabular.
    </p>

</div>

CSS Pseudo Element Z-Index

2 Answers2