Position property in CSS

Position property used to manipulate the location of an element in CSS.

Following are 5 possible value of Position property in CSS:-

1. Static:- Static position is by default position property in HTML element. Static positioning element has no effect on top/ bottom/ left/ right and z-index.

For eg:-

div.article{
      position: static;
      border: 2px solid black;
}

From the above example, the <div> element withclass='article' position get static with border 2px, color black.

2. Relative:- Position: relative brings the element to it's normal position. The top/ bottom/ left/ right/ and z-index will now work. Otherwise, the element is in the flow of the document like Static.

For eg:-

div.article{
      position: relative;
      top: 15px;
      left: 15px;
}

From the above example, the<div> element with class='article' get position - relative with top and left 15px.

3. Absolute:- In absolute position property the element is removed from the normal document flow and has no space to created a flow in a page layout. So, it take relatively positioned to its first non-static ancestor, top/ bottom etc.

For eg:-

div.article{
      position: absolute;
      top: 15px;
      left: 15px;
}

From the above example, the <div> element with class='article will take position absolute to its relative positioned element and will take top and left align accordingly.

4. Fixed:- In this fixed position property, just like absolute except the element is positioned relative to the browser window. The top/ left/ right/ and bottom properties are used to positioning this element.

For eg:-

div.article{
      position: Fixed;
      top: 15px;
      left: 15px;
}

From the above example, the <div> element with class='article will get the position-fixed along with top and left 15px.

5. Sticky:- This sticky position in which the element is positioned based on the user's scroll position. Internet Explorer doesn't support sticky position. The top/ left/ right and bottom properties are used to positioning this element.

For eg:-

div.article{
      position: sticky;
      top: 15px;
}

From the above example, the <div> element with class='article' will get the position-sticky and stick to the top of the page.

CSS- Positions

For more and in brief details click on this above link