How To Change Relative To In Webflow

‍

Here is how to change the Relative To property in Webflow:

1. Select the element, section or div you wish to change the property for.
2. In the right sidebar menu, locate Position.
3. At the bottom of this section you will find the Relative to value, typically showing a marker icon in the center with the word itself. Hover on it to see the exact element highlighted.
4. This crosshair icon shows the center of the highlighted parent element which what the selected element is Relative to.
5. In order to change this, we need to note that the Position: Relative property takes its Relative to: position from the first parent element with a Relative position. So, to change this property we must change which parent element has the relative property.
6. Select the parent element you wish to set as relative to.
7. In the right sidebar menu, notice the Position is not set to relative.
8. Change it to Relative.
9. Your original element should now use its much closer parent element as its reference. To confirm this, select the original element again.
10. In the right sidebar menu, under Position, hover on the same Relative to property.
11. You will now notice that the highlighted element has now changed to the closer parent element.