Tips & tricks

In this post, we gonna learn about position relative in css. Learn how to use it via some small example as well as figure out when we need to use it

What is position in css

In CSS, the property position is used to align element, make it displayed as our desired. Normally, rendering engine in browser will render HTML element follow the order left to right, top to bottom. It means most of the case, an element will be displayed on the right and bottom side of an element that stands right before in HTML code. But in some cases we need to do some different arrangement, that is the time we need to use css position

`position` accepts a wide range of values: static (default value) ,relative ,absolute ,fixed ,sticky. There are 4 more css property work with positions: top, left, right, bottom. With one remark that these 4 css properties only work with all the position’s values except static position. In this post, we only focus on position: relative which is quite rarely use.

What is relative position

To move an element to a new position rather than default position, we have to way to do that:

  1. Using margin. With this way we have a side effect that the following elements, which sit next to our element is also affected and moved to the wrong position when we set margin for our element.
  2. Using position. With this way, it only affects the current element and no changes for the following elements at all.

In this post we only focus on `position: relative` which is quite rarely use.

‘position: relative’ is an non-static position, that usually come with top, bottom, right, left CSS to arrange an element, move that element to a new position base on itself w. ith normal position

For example:

There are 3 elements with display:inline-block. It’ll be rendered like this

2nd element sits next to the 1st element on the right, Similarly, 3rd element sits next to the 2nd element on the right.

But sometime, we need some different layout. we need move move the 2nd element to the right side 20px and move it down 20px.

So it we apply margin-left: 20px and margin-bottom 20px, the result will look like this:

As you can observe that the when we set margin for the 2nd element, the 3rd one also be affected by that CSS, it is moved to the right as well as the row below move down.

Now, instead of using margin, we will use the combination of position relative and top, left CSS. We set the 2nd element with CSS:

The result will look like this:

As you can see that, 2nd element is moved right and down without effecting following element. It’s useful when we change the position of some element but want to keep the other element’s position.

Code sample:

See the Pen WmPgbP by hieu (@phuchieuct93abc) on CodePen.0

You can also read more about css position in this post: https://frontend.cloudaccess.host/css-property-position/

Wrap up

Position relative is similar to position absolute. Both of them are used to arrange element base on top, left, right, bottom CSS without effect the following element. While position absolute will arrange element base on the nearest parent which has position relative, position relative base on itself with the normal position.