back to homepage

CSS Position

Positioning help us to control our elements into a place.

Here are the different types of positioning.

              
    position: static; /* default */
    position: relative;
    position: absolute;
    position: sticky;
    position: fixed;
    position: inherit;

Static

A default position in every situation. It is always positioned according to the normal page.

position: static;
left: 0;
top: 0;

Relative

A positioned relative to its normal position. It allows to direct in every position we decided.
When we don't declare any value to a position, it'll act like it's Static
We can use the top, right, bottom and left position to push every element.

position: relative;
left: 150px;
top: -50px;

Absolute

A position that can remove the Element from the document flow and position itself in reference to a container and a container has to have a position assigned to it as well.
A container element has a relative position wonder why it is centered in the browser.
The text overlaps the image, just because both have positioned in Absolute

position: absolute;
right: 0;
top: -140px;

Sticky

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. - Mozilla Foundation, MDN Web docs

position: sticky;
top: 0;

Fixed

I AM FIXED

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. - Mozilla Foundation, MDN Web docs

position: fixed;
left: 50px;
top: 50px;

The fixed box is floating top left area. Below is extra space for scroll to test the positioning.