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
is used to align
`position` accepts a wide range of values: static (default value
What is relative position
To move an element to a new position rather than default position, we have to way to do that:
- Using margin. With this
waywe 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.
- 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
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
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/
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.