Overlay div with 100% height and width overflow parent div

Hi community,

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.

Backend:

Frontend:

Using Cwicly plugin version 1.2.9.5.8.4 and Cwicly theme.

What am I missing?

You need to add a position of relative to the div which holds your BG image.

@nadim,

Make sure your parent div is set to position: relative and see if that helps.

1 Like

Thanks, @Marius and @StrangeTech. That worked.
Just out of curiosity. I’d like to know why this is required,

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).

@StrangeTech , thanks for this.

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.

2 Likes