Difference between css position absolute versus relative | relative position
Ispentsometimeunderstandingthedifferencebetweenabsolutepositioningandrelativepositioning.ItwasaconfusingtopictomeandIdecidetoillustratetheirdifferenceswithpictures.Beforegoingfurther,weshouldknowthedefaultbehaviourofpositionwhenwedon’tspecifyanypositionproperty.position:staticBydefault,positionanelementbasedonitscurrentpositionintheflow.Thetop,right,bottom,leftandz-indexpropertiesdonotapply.—sourceMDNposition:relativePositionanelementbasedonitscurrentpositionwithoutchanginglayout.position:ab...
I spent sometime understanding the difference between absolute positioning and relative positioning. It was a confusing topic to me and I decide to illustrate their differences with pictures.
Before going further, we should know the default behaviour of position when we don’t specify any position property.
position: staticBy default, position an element based on its current position in the flow. The top, right, bottom, left and z-index properties do not apply. — source MDN
position: relativePosition an element based on its current position without changing layout.
position: absolute