CSS POSITIONING BRIEFLY EXPLAINED

Css positioning illustrates where an element is positioned in an HTML document, otherwise expressed as CSS position property which defines the top, right, bottom, left and Z-index attributes to determine where an element will be positioned finally in a document.

There are five types of Css position properties:

Static

This is the default position property that comes with any given element in a document , Any given element in a specified document without a given position is said to have a default position property of static
.sub { Position: static; }

Relative

This positioning property works exactly like static but can relatively position itself by changing the Top, Bottom, Left, and Right, it makes the object move relative to its normal position if it was statically positioned

Relative positioning follows the normal document follow but can be offset using the four properties above

.sub { Position: relative; Top: 20px; Left: 50px; }

Relative positioning can also be used as a container for Absolute positioned elements.

Absolute

This positioning property completely removes itself from the document flow when used by an object or element in a document.

If an element has the Absolute positioning property, it would act like every other elements in the document does not exist

The element would render itself in the document as a static element with no parent but can be corrected by giving it the properties of Top, Right, Bottom, and Left ,For the document to be aligned with its parents in the document, the parent element has to be positioned with either of the properties Fixed, Sticky or Relative for the element to be absolutely positioned to it ( Relative is more preferred by designers.)

.main { Position: Relative; }

.sub{ Position: Absolute; Top: 0px; Left: 50px; }

Note:

• Absolute positioned usually have their Width set by default to Auto instead of its full width like a Div.

• If none of the element in the document has the Properties of either Relative, Fixed or Sticky, It looks for elements that has the Transform, Filter or Perspective properties to use as a parent container

Fixed

This positioning property is always fixed based on the entire HTML document and has nothing to do with the parents element, the element stays in the same place even when scrolling through the entire document

.sub{ Position: Fixed; Top: 0px; Left: 0px; }

Sticky

This positioning property combines the property of relative and fixed positioning into one, The values of Top, Right, Bottom and Left get active when scrolled

By Default it is Relative but when the document is scrolled, the element with the Sticky property becomes Fixed.

.sub{ Position: Sticky; Top: 0px; Left: 0px; }

Conclusion
This position properties has values that have so many possibilities when used in designing web pages, This properties might be quite confusing to use with some levels of difficulties to it but also lots of potential

Thanks for Reading!