The main difference between CSS relative and absolute positioning lies in the context where positioning takes place. Relative positioning takes into account the current position of the element on the page, while absolute positioning uses the viewport as its default context.
So if a div
is placed under an heading and you relatively position it, then its position will be calculated according to its default positioning in the source. Conversely, if you use absolutely position it, its position will be calculated by taking the viewport as the default reference.
If you declare the parent element of an absolutely positioned element as relative, then its position will be calculated using the parent element as reference, not the viewport. This is called contextual positioning.