CSS Relative Positioning

The element box set to relative positioning will be offset by a certain distance. The element still maintains its shape before it was positioned, and the space it originally occupied is still retained.

CSS Relative Positioning

Relative positioning is a very easy concept to grasp. If relative positioning is applied to an element, it will appear at its location. Then, by setting the vertical or horizontal position, this element can be moved 'relative to' its starting point.

If top is set to 20px, the frame will be 20 pixels below the top of the original position. If left is set to 30 pixels, 30 pixels of space will be created on the left of the element, which is to move the element to the right.

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

As shown in the following figure:

CSS Relative Positioning Example

Note that when using relative positioning, the element still occupies the original space regardless of whether it is moved or not. Therefore, moving the element will cause it to overlap other frames.

CSS Relative Positioning Example

Position: Relative Positioning
This example demonstrates how to position an element relative to its normal position.