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?

When setting a div's position to "absolute" in Webflow, the parent object is determined by the CSS properties of the nearest positioned ancestor. If there is no positioned ancestor, then the parent object is the body element.

This behavior is a result of how the CSS positioning model works in general, not just specific to Webflow. When an element is set to position:absolute, it is removed from the normal document flow and positioned relative to its nearest positioned ancestor. The "position" property could be set to "relative", "absolute", "fixed", or "sticky" on an element to make it a positioned ancestor.

By default, a div in Webflow is a relatively positioned element. This means that if you place a div inside another div and set the child div's position to "absolute", it will be positioned relative to its parent div as long as the parent div has its position property set to anything other than the default value of "static". For example, if the parent div has a position of "relative" or "absolute", the child div will be positioned relative to the parent div.

However, if the parent div also has its position property set to "static" (which is the default value), the child div will be positioned relative to the body element instead of the parent div. This is because the body element is the nearest positioned ancestor.

Regarding the interface in Webflow, when you click on the "Body" link next to the target icon, it does not directly change the parent as indicated in the interface. Instead, it simply selects the body element in the navigator panel, allowing you to edit its properties. To change the parent of an element, you need to physically drag and drop it into another container in the navigator panel or on the canvas.

So, in summary, setting a div to position:absolute in Webflow makes the parent object the body element if the nearest positioned ancestor is not present or if the parent div itself has its position property set to "static". Clicking on the "Body" link next to the target icon simply selects the body element and does not change the parent of the element in the interface.