Web Design II Concepts

CSS Positioning

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

There are different values for the positioning attribute, these are:

Static
Relative
Absolute
Fixed
Sticky

Static

A statically positioned element is positioned according to the normal flow of the document. The top, right, left, bottom and z-index properties have no effect. This is the default value.

Elements using the static value aren't really that useful when positioning and structuring your web document. You should use relative or absolute at the very least.

Relative

The element is positioned according to the normal flow of the document, just like with the static value... but it is also offset relative to itself based on the values of top, right, bottom and left. The offset does not affect the position of any other elements, so the space is given for the element in the page layout is the same as if positioned were static.

When placing elements with the relative value, the elements place themselves relatively away from other relative elements, so they dont overlap, unles if you use other values such as top and right.

Absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom and left.

So, when placing elements with the absolute attribute without any top, right etc values, all elements will stay in the top left of the container element. This helps a lot as you can position elements exactly to where you want them to go, especially if they are bound to overlap each other.

Fixed

A Fixed element is an element that is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none. It's final positon is determined by the values of left, bottom, right, and top.

So, in a sense, this element is fixed to the spot where it is assigned to on the viewport. This is very useful for floating footers and headers on web pages. As whilst you scroll down the webpage the footer and headers will still show. But it can get annoying at times, especially when you dont want it floating everywhere, which leads to...

Sticky

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block including table-related elements, based on the values of top, right, bottom and left. The offset position does not affect the positon of any other elements.

So, how this works is if you apply "sticky" to an element, and your document is bigger than the viewport, then whilst scrolling, the sticky element changed position right when it is about to be out of the viewport, similar to fixed, until the container element is not in the viewport anymore, then it is gone. Sticky is a hybrid of fixed and relative somewhat.

Sources: (click on them to see them)

Positioning - MDN

CSS Positioning Concepts