Enable relative position

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

This video features an old UI. Updated version coming soon!
 
This video features an old UI. Updated version coming soon!

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. 


Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback