what is position in css?

• The position CSS property sets how an element is positioned in a document. The top, right, bottom,and leftproperties determine the final location of positioned elements.

  Why do we use position property in CSS ?

• The Position Property is CSS is used to set the position of an element The top, right, bottom, left and z-index properties help us to determine the final position of an element

CSS position property :-

There are five values that positioning property can take. They are:

• static

• relative

• absolute

• fixed

• sticky

Let's discuss each one of them.

Static

• This is the default value for elements. The element is positioned according to the normal flow of the document. The left, right, top, bottom and z-index properties do not affect an element with position: static .

Let's use an example to show that position: static has no effect on the position of an element. We have three div placed in a parent container. We'll use this example throughout this article.

  position: static;

relative

• The element is positioned according to the normal flow of the document and the offset to itself based on the values of top, right, bottom, left, and z-index. the offset does not affect the position of any other element

   position: relative;
  

absolute

• The element is positioned relative to its first positioned(not static) ancestor element.

  position: absolute;
  

fixed

• The element will be removed from normal flow, and will be placed relative to the initial containing block established by the viewport and will not be affected by the scrolling

   position: fixed;

sticky

• The element is positioned according to the normal flow of the document and it toggles between relative and fixed depending on the scroll position. it is positioned relative until a given offset position is met in the viewport, then it sticks in place (like position: fixed)

   position: sticky;