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 absolute position.

Absolute-positioned elements are completely removed from the document flow, so they no long touch or push other elements around them. They're pinned to the first parent element that has position relative, absolute, or fixed enabled.

 
In this lesson
  • Enabling absolute position
  • Positioning values
  • Z-index
  • An example

Enabling absolute position

Absolute Position in Webflow

To enable absolute positioning, find the Position label in the Layout section of the Style Panel, and click the Absolute icon.

Once enabled, the element will be removed from the document flow, and float above other elements.

Setting the relative parent

The closest parent element that has either relative, absolute, or fixed position enabled on it will be the parent that your element will be pinned to. If no parent elements have these enabled, by default the element will be pinned to the entire page (the body element).

Absolute Position in Webflow

Positioning values

When you set the position to absolute, new settings appear to control the positioning of an element inside the parent.

Using the presets

Absolute Position in Webflow

Presets allow you to quickly position the element where you want it relative to the parent element. You can choose any of the preset positions:

  • Top left - positions it to the top-left corner of the parent by setting top: 0px and left: 0px
  • Top right - positions it to the top-right corner of the parent by setting top: 0px and right: 0px
  • Bottom left - positions it to the bottom-left corner of the parent by setting bottom: 0px and left: 0px
  • Bottom right - positions it to the bottom-right corner of the parent by setting bottom: 0px and right: 0px
  • Left - positions it to the left side of the parent by setting top: 0px, left: 0px, and bottom: 0px
  • Right - positions it to the right side of the parent by setting top: 0px, right: 0px, and bottom: 0px
  • Top - positions it to the top side of the parent by setting top: 0px, left: 0px, and right: 0px
  • Bottom - positions it to the bottom side of the parent by setting bottom: 0px, left: 0px, and right: 0px
  • Full - covers the entire parent by setting all sides to 0px

Positioning manually

Absolute Position in Webflow

You can alter the position of the element manually, by changing any of the position values using the UI or by typing them in each input:

  • Top - increasing it will push off from the parent’s top border
  • Left - increasing it will push off from the parent’s left border
  • Right - increasing it will push off from the parent’s right border
  • Bottom - increasing it will push off from the parent’s bottom border

Setting negative values for any of these will move the item in the opposite direction. E.g., setting a -10px value to top will move the item 10 pixels above the parent's top border.

Setting 0px on an individual side will pin the element to that side of the parent. For example: setting top: 0px will move the top of the element to the top of the parent element. 

Setting top: 5px will position it 5px below the top.

Setting 0px on two adjacent sides (e.g., top and right) will position it in that corner.

Setting 0px on two opposing sides (e.g., top and bottom) will stretch it from one side to the other.

Setting 0px on three sides will pin and stretch the element to all those sides of the parent element.

Pro tip
  • Using pixels (px) will move an element to a specific position, whereas using percentages (%) will move it relative to the parent’s width/height

Z-index

By default, absolute-positioned elements stack above other elements that have no position set. The z-index can be adjusted to change the default stacking order of positioned elements. 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.

An example

Let’s absolute-position a submit button so that it’s pinned to the bottom of a form.

To do that, first, we need to relatively position the form element. Because, If we absolute-position the submit button first, the button may jump to an unexpected location. So, to keep the button inside the form element, let’s set the form element’s position to relative:

  1. Select the form element
  2. Set its position to relative
 

And now, let’s position the button:

  1. Select the submit button inside the form
  2. Set the position to absolute
  3. Set the bottom, left and right values to 0px
  4. Set the width: 100%

You may notice the submit button might overlap other form elements now that it’s absolute positioned. If this happens, you can fix it by adding bottom padding on the form element to compensate for the submit button’s height.