Hi guys, long time no see. Today we come back with an interesting topic to talk about the position absolute in CSS which is confusing you if you’re not familiar with it. Now lets’ start

What is position absolute

According to w3schools:

The absolute element is positioned relative to its first positioned (not static) ancestor element

https://www.w3schools.com/cssref/pr_class_position.asp

Absolute element is an element which is moved to different position and that position in base on it’s the closest non-static parent. Like other non-static position, absolute also comes with css top, bottom, left, right and z-index as well

For example

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

When we need to use it

When you want to move an element to another position and don’t want to keep the placeholder for it, position absolute is perfect for this case.

Compare with position relative

Both of position relative and position absolute are used to move an element to another place, however there is the biggest different between them. While relative element still keeps their original place even it’s moved to another place like a placeholder, nothing else can take that place. But absolute element no longer takes it’s original place like relative, it means it’s sibling element will take that place and treat as if absolute element was gone.

Like this example:

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

Final words

Hope that with these obvious examples above, you have know how to use position:absolute as well as distinguish between absolute and relative. Please put a comment below to let’s us know what do you think. Like this page if you see it useful and see you in the next topic.

Leave a Reply

Your email address will not be published.