In CSS, elements can be categorized according to how they can be positioned in the document flow. There are two primary types: non-positioned and positioned elements. Positioned elements can further be divided into relatively positioned, absolutely positioned and stickily positioned elements.
Their differences lie in how they behave in relation to the normal flow of the document, how they react to position parameter values, and whether they are assigned a space in the page layout or not.
Non-positioned / Static Elements
A non-positioned element is an element whose position cannot be changed by setting a top, bottom, right and left property. It is, in effect, a Statically Positioned element which has its position property set to static. All elements are set to have a static position by default. The element is positioned according to the normal flow of the document.
Relatively Positioned Elements
Relatively positioned elements have their position set to relative. They also remain in the document flow, but can change their positions with offset values set by top, bottom, right and left. It is important to note that relatively positioned elements change their position relative to themselves, i.e. relative to their otherwise static position.
Absolutely Positioned Elements
Absolutely positioned elements can have their position set to either absolute or fixed -- each coming with slightly distinct behaviors. They are removed from the flow of the document and not assigned any space. By default, they occupy the top-left corner of their containing block. Their position can be changed with top, bottom, right and left values.
There is a difference between elements with position: absolute; and those with position: fixed; depending on where their containing blocks are located in the DOM tree. For position: absolute, the element's containing block is its nearest positioned (or non-static) ancestor - and so its position parameter values are applied relative to that container's edges. In contrast, for position: fixed, its containing block is the initial containing block (<html> element) or any ancestor which has a value other than none for any of transform, perspective, or filter properties. And so they are positioned relative to the viewport or any qualified containing block.
References
Top comments (0)