We previously established in my prior post the static attribute of the position property.
The relative attribute of the position property will be covered in detail in this article.
Relative
With the relative attribute, we may position the div using additional properties like top, left, right, and bottom, unlike the static attribute.
When the div moves, based on our positioning the other elements and divs won't occupy the space left as a result of the shift. This is because even when the div moves, it maintains the original position it would have covered.
Note: The movement of the div is with respect to the original position of the div in the document flow.
The below code shows a parent div container with three children divs (box1, box2, and box3)
Observe how Box1 has now shifted 110px away from the left after the box was given the CSS position property with attribute relative, along with the other positioning properties Top and Left. Box1
Note: The movement to the left and away from the top wouldn't occur if the position attribute were static.
There is a sizable opening for Box2 after Box1 was moved away from the top and the left side. Box2
However, because the position attribute for Box1 is relative, it keeps the space that the box (Box1) would have taken up in the original position.
Box2 is therefore unable to occupy the space.
Similar to Box1, Box3 has a relative position attribute and a top position property set to 10px. Based on the normal document flow, the Box3 has moved from its original top position. Box3
Keep in mind that the bottom of Box2 reflects the location of Box3 original top, from which the box moves downward 10px.
I hope I was able to make the Position: relative; property easier for you to understand 😊😊.
Top comments (1)
Thank You