# CSS Positions

The Position property allows one to position elements based on five different position values.

-  static
-  relative
-  absolute
-  fixed
-  sticky

When position property is set to an element then CSS provides accessibility of ***top, right, bottom, right*** properties to align them.

**Static**
HTML elements are positioned default as static according to the element flow, It cannot use 
top, right, bottom, right properties.
```
div{
  position: static; /*  There will be no change  */
}
```
**Relative**
It helps in making the element move its position accordingly and also makes its child elements to hold within their flow when their child elements has position property of absolute.
```
div{
  position: relative; 
  left: 10px; /*  The div element gets the space of 10px on the left side */
}
```
**Absolute**
It helps in the movement of elements according to their parent that contains relative positions, When there is no relative positions mentioned by default it takes body as their relative position.
```
div.one{
  position: relative;
}
div.two{
  position: absolute;
  right: 0;
  bottom: 0;  /* This moves the element to right bottom of the div elements with class one*/
}
<div class="one">
  <div class="two">
  </div>
</div>
```
**Fixed**
It positions the element in relative to viewport, So no matter what it stays in the same position even when you scroll the page.
***Example*** : In some websites you can find scroll to top button when you reach the bottom.
```
div{
  position: fixed;
  right: 0;
  top: 0; /* It always stays in the right top position*/
}
```
**Sticky**
It positions elements based on users scroll position.
***Example*** : In some websites the navigation bar will be after the cover image but on scrolling when it reaches the top it stays fixed there.
```
div{
  position: sticky;
  top: 0; /* It makes the div to be fixed when it reaches the top else it scrolls according to the page*/
}
```