Enable relative position

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Enable relative position

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. 


Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form