Position: absolute is not working as expected

Hello everyone,

who can explain why my “popup wrapper” is not relative to the body? The div called popup wrapper needs to fill up the whole VW and VH. It should be relativ to the body, but instead it is relativ to the slider mask i think…
Any ideas?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

To be honest, i have know idea what you are asking for. But a DIV with position absolute will always fill up the whole space, until it hits a div that is position relative. So remember to change position static, to position relative of the div you want it to fill. Makes sense? :slight_smile:

Hi, sorry for the bad explanation.
I want the div „popup wrapper“ to fill the whole body. The body is the relativ object. No other object is set to relativ. But the “popup wrapper” does not fill the whole space of the body. And i don’t know why.

When you say “body” do you mean the whole screen then? Is it supposed to be an overlay covering the whole screen when the user clicks the button?

yes, that’s what I want to achieve.

If that is the case. Then you should use “fixed” and not “absolute”.

@ToreSBentsen Unfortunately that does not work. As you can see in the image, the popup-wrapper still does not fill the screen. Although he is relative to the body. :confused:

@Nilson You need to add width: 100vw and height: 100vh for it to work. :slight_smile:

Of course… but if I do so, the popup wrapper ist not centered in the page :disappointed_relieved:
Even if I play around with margin: auto or other settings.

Is this what you’re trying to achieve?

No sorry. What I finally want to achieve is that the div-box (class name: popup-wrapper) fills the whole screen (100VW 100VH). It´s a standard procedure. But it does not work…

(Right now the popup wrapper is empty. But later it will be filled up with the curriculum vitae of the person by clicking on “Zur gesamten Vita” engl. show the entire CV.)

My advice would definitely be to create CMS based pages pages for each persons CV. That would also be a lot better for Google.

But to “solve” your problem, you will have to take popup-wrapper out of the slider to make it work like you “want”. That is the only way you can achieve for the div to fill up the whole space.

1 Like

Okay. So at least the problem is, that elements inside a slider, don´t work with position: absolute?

They work. They work exactly like i would expect them to. I guess we just misunderstood each other. That happens. :slight_smile:

You can never achieve what you’re seeking by using position: absolute in this case.

Okay fine, thank you very much @ToreSBentsen .

I thought, that an absolute positioned element is always absolute positioned to its relativ element… at least, that´s what all the webflow tutorials are showing. :thinking:
So my expectation was, that the popup wrapper can absolute positioned to the body. Even when it´s inside the slider.

Well, sorry that it could not end up like you wanted it to.

But like i said, i would for sure make CMS pages for all of the employer CV’s. That would work much better than doing an overlay for each of them. :smile: I can see you already have a CMS collection for the employees. So it’s just about adding some more fields to that. :+1:

1 Like

Yes sure, thank you :blush:

What should I do if the direct parent of a child element/symbol is set to position relative… but the child element/symbol is ignoring the parent element’s setting and positioning itself to the body of the whole page?

By the way… to Webflow designers…
The way that you have designed the “relative to” element in the “Position” sidebar dropdown makes it look like it is supposed to be interacted with. The design makes It looks like one should be able to click and change the targeted “relative to” element (similar to how one can change target element in the interactions panel).
This would be cool… but also not sure if that is what you were going for.