Issue with creating overlay with :before

Hi. I have been working on creating an overlay for my page banner. I was finally able to get it to work but I don’t understand why it was an issue. I had created a :before pseudo-class for my .banner class and applied a background color with transparency. However the color was applied to the whole body and not just the .banner div. Apparently I was missing the position property with a value of relative for my banner. I have no idea why the color was applied to the whole page because of this. Any help with this would be great!

Absolute positioned elements don’t relate to their direct parent element but to the next ancestor element which is positioned relative. If there is none, it will consider the body as such: CSS-Tricks: Absolute Positioning Inside Relative Positioning