Activate relative situation

Elements positioned relatively are situated in relation to their default location — revolving around themselves. Elements with relative positioning open up possibilities for placement while keeping their initial location intact within the document flow.

After assigning a relative position to an element, you can use values that are relative to its starting point for top, bottom, left, or right. Additionally, you have the option to modify its z-index value.

Outlined in this tutorial:

1. Overlay of an element
2. Subordinate placement of an element

Overlay of an element

1. Choose the element you wish to overlay
2. Create a customized class (e.g., “special”)
3. Set the positioning to relative (this will enable z-index adjustment)
4. Now, you can alter the position independently of other elements, causing it to appear in front of the default content

Subordinate placement of an element

1. Select the element you want to position underneath
2. Generate a customized class (e.g., “super”)
3. Apply relative positioning (to enable z-index customization)
4. Assign a numerical value (greater than 0, in this particular scenario)
5. In the preceding step, assign a higher or lower value to the element to either place it on top or behind

Relative positioning enables you to position elements in relation to their original placement independently from surrounding content on the page.