The position property allows you to move elements relative to their current place in the document (relative), anywhere within a parent element (absolute), and anywhere inside the viewport (fixed). Here we’ll be covering relative position.

Relative-positioned elements are positioned relative to their normal position. Increasing or decreasing the positioning values will move the element, but the surrounding elements will continue to interact with the element’s original place in the document.

 

Enabling relative position

Relative position in Webflow

To enable relative positioning, find the Position label in the Layout section of the Style Panel, and click on the Relative icon.

Positioning values

When you set the position to relative, settings appear for fine-grain position control. The default value for top, bottom, left, and right is auto which preserve the original position of the element within the normal document flow—that’s why you will see no evident change when you enable relative positioning.

Relative position in Webflow

You can change these values by dragging the UI widget on the left or by typing values in each input:

  • Top - increasing it will push off from the top of the element, moving it down.
  • Left - increasing it will push off from the left of the element, moving it to the right.
  • Right - increasing it will push off from the right of the element, moving it left.
  • Bottom - increasing it will push off from the bottom of the element, move it up.

Adding negative values for any of these will move it in the opposite direction.

 

Z-index

The z-index can be adjusted to change the default stacking order of the element. By default, elements on the bottom of the page have a higher stacking order than the elements before them. Increasing the z-index allows an element higher on the page to overlap an element lower on the page.

Learn more about z-index and how to stack elements in your page.