CSS Positioning

What Is Positioning?

Positioning is a special property in CSS that gives special abilities to HTML elements in context to each other. There are three main property values that you should be mindful of.

Wireframe

Position: Relative

Relative positioning allows the HTML element to move in context to where it was originally placed in the HTML flow. It does not remove the selected element from the flow.

relative

Position: Absolute

Absolute positioning can be used in two distinct ways, either by itsef or nested within another HTML element.

If you use absolute positioning by itself, the selected element will be removed from the HTML flow and placed exactly where you position it.

If you use absolute positioning within another HTML element, the nesting element needs to have a relative positioning and the nested HTML element with absolute positioning will then be removed from the HTML flow of the nesting element and placed accordingly. However this will not change the selected elements' positioning within the overall HTML flow.

absolute

Position: Fixed

Fixed postioning does not change the selected element's positioning within the HTML flow, but allows the selected element to remain in place on your site layout as you scroll up and down.

fixed