Position:

The CSS position property defines the position of an element in a document. This property works with the left, right, top, and bottom properties to determine the final position of an element on a page.

There are in total five values that the position property can take They are:

• static

• relative

• absolute

• fixed

• sticky

So without wasting any time of yours let's get straight into each of the.

Static

Static:

Static is the default position for HTML elements. Elements with position: static is positioned based on the normal flow of the page, as you would expect them to be without any CSS styling. They are not affected by the top, right, bottom, or left properties. z-index also does not apply to static elements.

In the example below, we are taking three div's and only div 2 is assigned position: static However, you’ll see that it is placed in the document the same as another two div's if it did not have this property. You can delete the position: static from the CSS and the display will not change.

Example:

https://codepen.io/pujari-basvaraj/pen/MWBRBwE

Relative

Relative:

When we assign position: relative , an element follows the render flow of the page,

but it will get shifted relative to its initial position.

To determine the offset of the relative element, you set the values for the top, right, bottom, and/or left properties. Surrounding elements won’t be affected, but there will be space where the repositioned element would have been.

In our example, I've set the offset of div 2 by 18 pixels to the top (using the bottom property) and 20 pixels to the right (using the left property), The div positioned relatively doesn't affect the positions of surrounding elements.

Example:

https://codepen.io/pujari-basvaraj/pen/RwBOBVw

Absolute

Absolute:

With position: absolute, an element ignores the normal document flow. However, instead of being positioned relative to the viewport (like with position: fixed), it’s positioned relative to the nearest positioned ancestor (a positioned ancestor is any element with a position value besides static, the default).

Here, div 2 is placed inside a container div (in gray) and positioned relative to the container, since the container is the nearest ancestor element of div 2.

Example:

https://codepen.io/pujari-basvaraj/pen/BaPEPwL

Fixed

Fixed:

Elements with position: fixed do not adhere to the normal render flow of the document. Instead, fixed elements are positioned relative to the viewport — in other words, the part of the document that is currently visible in the browser.

Fixed elements do not move when the user scrolls, and, unlike relative, they do not leave a blank space where the element would have been positioned. You can use the top, right, bottom, and left properties to set the fixed element's final position.

Example:

https://codepen.io/pujari-basvaraj/pen/vYaMaRO

Sticky

Sticky:

Elements with position: sticky are positioned depending on the user’s scroll. Depending on how far the user has scrolled down the page, a sticky element behaves like a relative element until the viewport meets a specified position. Then it becomes fixed in a spot and appears to “stick” to the page as the user scrolls.

In this example, scroll down and watch as div 2 goes from behaving like a relative element to a fixed element when it reaches the position top: 0 and “sticks” to the top of the viewport.

Example:

https://codepen.io/pujari-basvaraj/pen/yLqrqEK

Takeaway

That's it for the day see you in the next blog until then...

Keep Writing Code❤️