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 elementhttps://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
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
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:
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.