I have a parent div with fixed height set to 260px and background image. I place a child div that adds an overlay to the parent. For this, I set the position of the child div to absolute and set height and width to 100%.
The reason why I am adding the overlay like this is that it will eventually be visible based on a condition.
This is working just fine on the backend. But on the front end, the overlay overflows that parent div and stretches to the grandparent’s height and width.
It is because absolute positioned elements are always positioned in relation to their positionable parent, which is any ancestor that is positioned, or if none exist, the root element.
Since you didn’t explicitly position the parent element, the position: absolute you set was in relation to the root element (or any other positioned ancestor that happened to be set that way).
You can check here why this is happening.
Just keep that in mind for the future and you should be fine.
Absolute positioned elements always need a dedicated parent to orient itself.