I’m still unable to grasp the logic of relative positioning in combination with a background overlay.
Why does it sometimes work and sometimes not?
Currently I’ve got a div with an image as background. Inside it is another div with headers, aligned on the bottom. I want a gradient overlay of black and transparent over the image, so that the bottom of the image is almost completely black and the top is visible. I want the div inside with text to be fully visible of course and not affected by the background overlay.
When I change both divs to relative positioning it’s not working, and it’s also not working if I do just one of them.
How? Would someone mind explaining the logic of relative positioning to a total CSS / HTML noob?
What is the actual issue?
Is your heading hidden behind the overlay?
If so, this is rather related to the z-index property.
Could you try to apply a z-index of 1 to your heading or heading container?
To make a z-index work, a position must be defined (the only exception would be a flex children).
When you apply an overlay, which in fact is an absolute positioned pseudo element, the block itself needs a position applied too, so the absolute positioned overlay can position itself accordingly.
thank you for your reply! i think your fix is for a different problem: i wanted my headings inside a div with a background and an overlay to still be visible, but they kept being overlaid by the overlay so to speak
The tip I shared exactly addresses this. It provides a clean way to have an overlay on top of a background image OR a background image on top of an overlay using a single container block - and for both of these to be behind any nested content.