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.