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?
if you know the answer would you mind just sharing here? i kind of hoped i’d get the answer here as it’s easier than digging through that 45 minutes episode
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.
I don’t think relative positioning was your issue here - as @Marius pointed out, it was a z-index issue. If you use the tip I shared, this should solve your issue in a clean way.
However in the past I have also used relative positioning to fix an overlay going over headings, or do you always use z-index to fix overlays going over elements inside a div?
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.
Without specific examples it’s difficult to say why it works sometimes on your end and sometimes not.
If you are able to provide an example for each case, based on that, I can provide more details.
It’s also a matter of the HTML/block structure whether a z-index is required or not.
Also, the configuration of parent items can play a role.
