How To Change Relative To In Webflow

Quick summary

In Webflow, the Relative to property determines which parent element an absolutely positioned child uses as its reference point. To change it, you must set the desired parent element's Position to Relative, which makes it the new positioning anchor for the child element.

Steps

1. Select the element, section, or div you wish to change the Position property for.
2. In the right sidebar menu, locate the Position section.
3. At the bottom of the Position section, find the Relative to value — it typically shows a marker icon labeled itself. Hover over it to see the referenced element highlighted on the canvas.
4. Note the crosshair icon, which marks the center of the highlighted parent element that the selected element is currently Relative to.
5. Understand that Position: Relative inherits its Relative to reference from the first parent element with a Relative position — so you must change which parent holds that property.
6. Select the parent element you want to set as the new relative anchor.
7. In the right sidebar menu, notice the Position is not yet set to Relative.
8. Change the parent element's Position to Relative.
9. Return to your original element to confirm it now references the closer parent element.
10. In the right sidebar under Position, hover on the Relative to property again to verify the change.
11. Confirm the highlighted element has updated to show the closer parent element as the new reference.