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.