Enable relative position

Use relative position to move elements relative to their normal position.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

Relatively positioned elements are positioned relative to their normal position — around themselves. Relatively positioned elements unlock placement options while their original placement is preserved for document flow. 


Once you set an element to relative positioning, you can use values relative to this starting position for top, bottom, left, or right. You can also adjust its z-index value


In this lesson:

  1. Overlapping an element
  2. Underlapping an element


Overlapping an element

  1. Select the element you’d like to overlap
  2. Create a combo class (e.g., “special”)
  3. Set the position to relative (this will unlock z-index controls)
  4. You can now adjust the positioning separate from other elements and will stack in front of auto content


Underlapping an element

  1. Select the element you’d like to underlap
  2. Create a combo class (e.g., “super”)
  3. Set the position to relative (to unlock z-index controls)
  4. Give it a value (greater than 0, in this case)
  5. Give the element in the last step a value higher or lower and it will either stack on top or behind


Relative positioning lets you position elements relative to their original position separate from other content on the page. 


Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top