When using Webflow, why does setting a Div inside another Div to position:Absolute always make the parent object the Body, even if it's not the actual parent? Also, why does clicking on the Body link next to the target icon not change the parent as indicated in the interface?
TL;DR
- An absolutely positioned element in Webflow anchors to the nearest ancestor with a non-static position; if none exists, it defaults to the Body.
- To change this, manually set the desired parent div to position: Relative in the Style panel, as the "Body" label is only informative.
When using position: Absolute in Webflow, the element is positioned relative to the closest ancestor with position: Relative or another non-static position. If no such ancestor is found, it defaults to the Body.
1. Why Absolute Position Defaults to Body
- Absolute positioning looks for the nearest ancestor with a position of Relative, Absolute, Fixed, or Sticky.
- If no ancestor has one of these positions, the browser (and Webflow) treats the Body as the positioning context.
- Webflow reflects this in the style panel by labeling the relative reference as Body, even if the div is nested deeper in the hierarchy.
2. Parent Not Being the Positioning Context
- Even if a div (e.g.,
.parent-div) wraps the absolutely positioned div (.child-div), if.parent-divhas position: Static (the default), it won’t act as the positioning context. - You must set
.parent-divto position: Relative for it to serve as the container for absolute positioning.
3. Why Clicking the "Body" Link Doesn't Set a New Relative Parent
- The "Target" icon and Body link shown in the style panel is informative only—you can’t use it to assign which ancestor should act as the positioning context.
- Clicking this link simply highlights the current reference (e.g., Body), not change it.
- To change the positioning context, you must manually select the intended parent in the navigator and set its position to Relative (or another positioning style).
4. How to Fix the Issue
- Select the intended container or parent div.
- Set position: Relative using the Style panel.
- Now select the inner position: Absolute element. It will reference the newly positioned parent instead of the Body.
- Confirm by looking at the label next to the target icon—it should now show the correct parent.
Summary
A div with position: Absolute is always positioned relative to the nearest ancestor with non-static positioning. If no such ancestor exists, it defaults to the Body. Clicking on the "Body" label in Webflow doesn’t change this parent—it’s just a visual indicator. To override it, set the intended parent div to position: Relative.