Today Let's learn all about position property in CSS

Position property in css lets you position all the elements in HTML. You can position any element with the help of the top, left, right, or bottom proper and these are called offsets. The top and bottom properties specify vertical offsets from their position; the left and right properties specify horizontal offsets from their position.

Syntax:

      position:relative;
      position:absolute;
      position:fixed;
      position:sticky;

Let's go line by line and learn these properties

Static:

In static, the elements are positioned in normal flow but there is no effect of top, left, right, and bottom properties on static. The Elements are default in a static position, so applying a default value won't do anything.

Relative:

In relative, the elements are positioned in normal flow and you can also change the position with the help of the top, left, right, and bottom. While changing the position the other elements won't have any effects and the space given to the element on the page is the same as if the position was static. It creates a new stacking context where the value of the z index is not auto.

stacking context is like putting one thing on top of each other and you are deciding which one to show at the top or bottom with the help of the z-index.

.one{
  position:relative;
  top:10px;
  left:20px;
}

Absolute:

In absolute, the elements are removed from the normal flow of the document and there is no space given to the element from normal HTML flow as the element doesn't exist in the HTML flow. The absolute property is positioned with the closest relative positioning. The closest relative positioning can be made by applying position relative to its parents or ancestor so that you can position the absolute element with respect to that or else if there is no ancestor then it will directly position itself with the initial containing block.

The margins of an absolute element do not collapse with other elements and they are added to offsets.

  position:absolute;
  top:20px;
  left:150px;

You can increase the height and width of the absolute elements with the help of the top, left, right, and bottom

To increase the height you need to put top and bottom properties and height to auto.

To increase width you need to put left and right properties and width to auto.

Fixed:

In fixed, the elements are removed from the normal document flow, and same as absolute no space is created in the normal HTML flow. It is positioned with the initial containing block, except when its ancestors have this property:- transform, perspective or filter (element will behave with respect to ancestors). This creates a new stacking context.

  display:fixed;
  top:100px;
  left:50%;

Note: perspective and filter are inconsistent in browsers they behave differently.

Sticky:

As the name suggests, it sticks the elements in the HTML flow document. In sticky, the elements are positioned in the normal HTML flow and positioned to offsets relative to its ancestor block container. And if you scroll ahead of the offsets then it will behave as fixed and remain on the screen. Sticky is a combination of both fixed and relative. As the normal flow, it remains on the screen and if you move then it changes its properties to fixed. Sticky always creates a new stacking context. You usually used it for the navbar.

  position:sticky;
  top:80px;

This is it, You have gained a new skill to position elements with CSS.

Hope you liked

polydotcom