CSS Tutorial

CSS Positioning

Using CSS, we can set all the elements on our webpage to any position we like.
For example, we can position an element at the very top of our page, or 50px below the element before it.
To control just how an element will appear in the layout, we need to use the position property in CSS.
In addition, we can utilize some other position-related properties: top, right, bottom, left, and z-index.

Possible Values Of Position

The position property can take five different values and they are:
⚪ static
A static positioned element is always positioned according to the normal flow of the page.
All the HTML elements are positioned as static by default.
Static positioned elements are not affected by the top, bottom, left, right, and z-index properties.
⚪ relative
A relative positioned element is positioned with respect to its normal position.
In the relative positioning scheme the element's box position is calculated according to the normal flow.
Then the box is shifted from this normal position according to the properties — top or bottom and/or left or right.
A relatively positioned element can be moved out from its original position but it keeps the space originally reserved for it in the normal flow.
It can overlap with other elements according to their order of appearance in the page and to prioritize this overlapping , we can use another property called z-index
⚪ absolute
An element with position: absolute is positioned at the specified coordinates.
It is taken out of the normal flow and can be placed absolutely anywhere on the web page that the designer chooses.
An absolutely positioned element is positioned relative to the first parent element that has a position other than static.
If no such element is found, it will be positioned on a page relative to the 'top-left' corner of the browser window
⚪ fixed
Fixed positioning allows us to fix the position of an element to a particular spot on the page, regardless of scrolling.
In other words , we can say that the fixed positioning is a subcategory of absolute positioning.
The only difference is, a fixed positioned element is fixed with respect to the browser's viewport and does not move when scrolled.
⚪ sticky
A position: sticky element will initially behave like position: relative element, but if we keep scrolling, they will get taken out of the normal flow and behave like position: fixed wherever we have positioned them.
In simple words , we can say that a sticky element toggles between relative and fixed, depending on the scroll position.

---