Currently, I am attempting to layer divs on top of a background image. All the elements have designated position attributes, and I have applied a 50% opacity to the background image so that what's behind it is partially visible. Despite setting the z-index of the 'wrapper' div higher than the image, it is still appearing behind it instead of on top. Additionally, the div is positioned at the bottom of the page when I would like it to be at the top with a height of 100%.
Here is a visual representation of the issue:
As shown in the image, the div is obscured by the image itself, only visible due to the transparency effect applied to the image.
I would greatly appreciate any assistance or advice on this matter. Thank you!