In it an element will shift relative to its starting point by setting a vertical or horizontal position. If the top position is set to be 20 pixels, then the box will appear 20 pixels below the top of its original position and if the left position is set to 20 pixels then it will create a 20-pixel space on the left of the element, moving the element to the right. Its usage is illustrated as
#box2 {
position: relative;
left: 20px;
top: 20px;
}
With relative positioning, the element continues to occupy the original space, whether or not it is offset. As such, offsetting the element can cause it to overlap other boxes.
Elements with a relative position can be used as a point of reference for elements nested within them that are absolutely positioned. The position of a relatively positioned element can be adjusted using the offset properties. A relatively positioned element can have a position on the z-axis.
If no element’s position is given for reference then the elements are positioned relative to the browser’s viewport.
