With CSS relative position, the element still affects the document flow, but it can be offset, or “nudged” around from its original location. The element will appear to have been moved visually, but its effect on the DOM remains the same.
Changing the visual location of an HTML element is a common front-end web development task. The challenge is in choosing which tool should be used to accomplish this task. By “tool”, I mean which CSS property best suits the outcome you hope to have? Now, while the position property is quite often the go-to tool for this task, sometimes it can be confusing as to which CSS position property to apply. For example, absolute is similar to fixed.
But then again, absolute is sometimes confused with relative because of the ability to apply “top”, “right”, “bottom” and “left” properties to your rule set.
Just keep in mind that the confusion that surrounds absolute and relative position is mostly related to document flow. With absolute position, you are removing the element from the document flow, which is neither good nor bad; it’s just a big feature of absolute position. So, if you feel that absolute position is the tool you need, look HERE.
If you want to change the visual location of an element, yet keep it in the document flow, then CSS relative position is what you need. The element will still have the exact same physical effect on the DOM. That is to say: the other elements around it still think it is exactly where they expect it to be. But, from a purely visual standpoint, the element can be moved.
Example # 1
In Example # 1, we have three nested elements with the following classes applied: “child“, “parent” and “grand-parent“. From now on, let’s use those class names to refer to the elements. Each element has a specific CSS background-color property set, so that it is easier to identify.
The child element has its CSS position property set to: “relative“. It also has its CSS top and left properties set to 100px and 50px. This tells the browser: “offset this element 100px from the top and 50px from the left of where it should normally be in document flow. As a result, the child element appears pushed down 100px and pushed right 50px.
Example # 2
See the Pen CSS Relative Position – Intermediate 2 | Front End Video by Front End Video (@frontendvideo) on CodePen.
In Example # 2, we’ve added five black boxes that are siblings of the child element. They do not have position relative set, so they appear exactly where we expect them to be in the document flow. Let’s call each of these five black boxes child.black.
Notice that although our child.green box appears pushed down and pushed right, the child.black boxes are not pushed down. It may seem as though they should, since the child.green box should push them down. This is because using position relative to “nudge” an element around only has a visual effect on the DOM; it does not affect the document flow. So, all of the child.black boxes still feel as if the child.green box is exactly where they expect it to be in the DOM. The “nudging around” aspect of using position relative is purely visual.
Example # 3
See the Pen CSS Relative Position – Intermediate | Front End Video by Front End Video (@frontendvideo) on CodePen.
In Example # 3, we have added position: relative to the fourth child.black box by using the CSS nth-child selector:
.child.black:nth-child(4). This box is white, with a purple border. We have set it to be offset 10px from the top and 80px from the left of where it should normally be in the document flow. Just as is the case with child.green, the “nudging” is purely visual; the two child.black boxes below are not affected by this and appear as if this white box with the purple border is still were it should be in the DOM.