Using the position property is one of many ways to change the layout and positioning of an element. This property is unique in that it allows elements to be positioned relative to themselves (relative), positioned relative to a parent element (absolute), and positioned relative to the viewport even the page is scrolled (fixed).

The flexibility of the position property makes it possible to create very unique web layouts. You can even specify the stacking order of positioned elements that overlap other elements using the z-index property.

Here we’ll cover the values you can set for the position property:

  • Auto
  • Relative
  • Absolute
  • Fixed
Position in Webflow

You can set the position of an element in the Styles Panel under the Layout section. You may need to switch the Advanced toggle to access the settings of this property.

Auto

Auto Position in Webflow

Auto (also known as static) is the default value of the position property. Elements appear in the order they are stacked relative to other elements, without overlapping. This is referred to as the "normal document flow."

Relative

Relative Position in Webflow

When you set the position value of an element to relative and use the settings to reposition the element, the position will be relative to its normal position. It can overlap other elements around it without affecting their position. So, it doesn't interrupt or mess with the normal document flow.

Learn more about relative positioning and how to use it in your designs.

 

Absolute

Absolute Position in Webflow

Setting an absolute position on any element completely removes the element from the document flow. By default the position is relative to the body element. However, you can set any parent element’s position to relative so that the  absolute-positioned element will be positioned relative to that parent element.

In fact, absolute-positioned elements are positioned relative to the first parent that has either position relative, absolute or fixed enabled.

Learn more about absolute positioning and how you can use it in your projects.

 

Fixed

Fixed Position in Webflow

Fixed elements are positioned relative to the viewport or the browser window. That means, when you scroll down the page, fixed elements stay fixed in their positions. This is commonly used for fixed navigations.

Learn more about the Fixed Position and how you can implement it in your sites.

 

Helpful resources

At the moment, the native Webflow positioning tools do not include the sticky position, however, you can still use it in your designs by using custom code. Check out these resources from the Webflow blog to learn how to: