:before pseudo element is not staying in div when positioned absolute

Question

Hi I have an overlay I am trying to get to work. The overlay is not staying within its parent and is just kind of floating around. I am using the console on Firefox which tells me that its "not a positioned element" despite the fact I am using position absolute.

greyed-out::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;

.greyed-out {
    overflow: hidden;
    border: solid 1px black;

Manny · Accepted Answer · 2021-05-12T19:44:45.933

The issue here is that the parent element was not set to position relative. The proper css would be:

.greyed-out::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;

.greyed-out {
    background: rgba(0,0,0,0.5);
    z-index: 2;
    overflow: hidden;
    border: solid 1px black;
    position: relative; <<< this is needed
}

score 0 · Answer 2 · answered May 11 '21 at 18:41

Your div's position needs to be set to relative. You are also missing some closing braces:

greyed-out::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.greyed-out {
    overflow: hidden;
    border: solid 1px black;
}

:before pseudo element is not staying in div when positioned absolute

2 Answers2