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

Fixed-positioned elements are completely removed from the document flow — meaning they no longer touch or push other elements around them. They're pinned to the viewport, unlike absolute elements, which are pinned to one of their parent elements.

 

We’ll be covering these concepts in this lesson:

  • Enabling fixed position
  • Positioning values
  • Z-index
  • Example: fixed navigation

Enabling fixed position

Fixed position in Webflow

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

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

Positioning values

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

Using the presets

Fixed position in Webflow

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

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

Positioning manually

Fixed 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 viewport’s top border
  • Left - increasing it will push off from the viewport’s left border
  • Right - increasing it will push off from the viewport’s right border
  • Bottom - increasing it will push off from the viewport’s bottom border

Adding negative values for any of these will do the opposite operation.

Setting 0px on an individual side will pin the element to that side of the viewport. For example: setting top: 0px will move the top of the element to the top of the viewport. Setting top: 5px will position it 5px from the top.

Setting 0px on two adjacent sides (e.g. like 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 viewport.

Pro Tip: using pixels (px) will move it to specific position, whereas using percentages (%) will move it relative to the viewport’s width/height.

Z-index

By default, fixed-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.

Example: fixed navigation

Usually, you may want to use the fixed position with a navbar. When you want the navbar to stay fixed in position on your screen while you scroll through the page.

To add the fix positioning to a navbar:

  1. Add a navbar to your project
  2. Select the main navbar element
  3. Under the Layout section of the Styles panel, set the Position to Fixed
  4. Choose the Top preset position
  5. Select the body
  6. Add top padding so that the navbar doesn’t overlap content

You can of course choose any preset, or manually adjust the position of the navbar or any element you want to position this way.

Since, any fixed element is removed from the document flow, it will appear above auto-positioned elements. It may cover some part of your content. In that case, you may want to use some padding/margins on the content that the fixed element is covering.