CSS: difference between relative and absolute positioning

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.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Comments are closed.