How can I fix my z-index issue when placing a ::after under its parent div in CSS?

Question

When I try putting a ::after under is parent div it doesn't work.

I tried to everything and I didin't find any answers thats why I ask y'all

  <div className='spacesSpaceContainer'>

    <div className='spaceCreator'>
            
    </div>

 </div>

That's my tsx for the container

.spacesSpaceContainer{
    width: 100%;
    height: fit-content;
    display: grid;
    padding: 20px var(--paddingside);
    gap: 30px;
}

.spaceCreator{
    width: 100%;
    height: 300px;
    border-radius: 16px;
    background-color: var(--hoverColorOpacity);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    backdrop-filter: blur(100px);
    z-index: 0;
}
.spaceCreator::after{
    content: '';
    position: absolute;
    top: 25%;
    right: 25%;
    width: 50%;
    height: 50%;
    background: linear-gradient(135deg, var(--purple), var(--blue)) ;
    border-radius: 16px;
    z-index: -1 ; 
}

I don't know why the z-index of the .spaceCreator::after don't work, I want to put it under the parent div ( .spaceCreator ) but when I try it doesn't go under it.

score 0 · Answer 1 · answered May 27 '23 at 19:40

Using ::after does not appear after the associated element, it appears after the content inside the associated element. This means that the .spaceCreator element and .spaceCreator::after have the same stacking context, so z-index cannot change the stacking context of one without the other

How can I fix my z-index issue when placing a ::after under its parent div in CSS?

1 Answers1