The **position property** in CSS defines where an element should be placed on a page. This placement helps identify the type of positioning methods an element uses. There are five types of positions.



# Types of positions

## 1) Static

A static element which is set as default for HTML elements has no special position. It simply follows the page format where the element will fit in. It also remains unaffected by other position properties like bottom, top, etc. 

## 2) Fixed

A fixed element is rigid in terms of position i.e. it does not move no matter what; scroll the page up and down and yet the element stays right where it is. You can, however, use the other positioning properties like left and right to position this element.

## 3) Relative

When an element is defined in an HTML file, it has an already existing position for itself. Using the relative position method, you deviate the element from that "normal" position. This is done by then adjusting the left, right, top and bottom properties within a position. The difference here lies in the fact that the content around this element, adjusts to fit any gaps that occur due to its relative alignment. 

## 4) Absolute

Here, a different comes in place; elements have ancestors from which they are derived. Given an element has an ancestor and its position is set to absolute, then that elements position is determined in line with the ancestor. If this is not the case, then the element simply fits into the page and does move when the page is scrolled i.e. it considers the body as its parent. 

## 5) Sticky

This gives us the best of two worlds; `fixed` and `relative`. It changes its position according to the scrolling of the user and interchanges between the two properties mentioned. It is relative as long as the user is scrolling and fixed when they aren't. Overall, it sticks and unsticks itself from time to time. 

>**Note:** Without having defined the **position method** you cannot assign the alignment within this position like *bottom, top, left and right*. 

<html>
 <head>
  <style>
    div.static {
    	position: static;
      border: 1px solid #000000;
    }
    div.space{
    border: 10px solid #ffffff;
    }
    div.fixed{
      position: fixed;
      border: 2px solid #ff0000;
    }
    div.relative{
      position: relative;
      left: 50px;
      border: 5px solid #008000;
    }
    div.absolute{
      position: absolute;
      border: 2px solid #0000FF;
    }
    div.sticky{
      position: sticky;
      border: 5px solid #FFFF00;
    }
   </style>
 </head>
 <body>
   <div class="static">
     This div element is static.
   </div>
   <div class="space"></div>
   <div class="fixed">
     This div element is fixed.
   </div>
   <div class="space"></div>
   <div class="space"></div>
   <div class="relative">
     This div element is relative.
     <div class="absolute">
     This div element is absolute.
   </div>
   </div>
   <div class="space"></div>
   <div class="space"></div>
   <div class="sticky">
     This div element is sticky.
   </div>
 </body>
</html>

codemirror

What is position property in CSS? 

The position property in CSS defines where an element should be placed on a page. This placement helps identify the type of positioning methods an element uses. There are five types of positions. 