CSS Positioning

What is position property in CSS ?

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

Static position

In static position, the element is positioned according to the normal flow of the document, the top, right , bottom, left and z-index have no effect, this is the default value. In the example below, we are experimenting with the middle div to show different effects of the properties.

  #static #middle {
        position: static;
        top: 100;
        left: 100;
      }

As you can see in the example, the static position does not have any effect when we try to offset the position.

Relative and Absolute position.

In relative position, the element is positioned according to the normal flow of the document, and then offset relative to itself based on top, right, bottom and left, and this does not affect the position of any other elements.

#relative #middle {
        position: relative;
        top: 100px;
        left: 100px;
      }

  #absolute #middle {
        position: absolute;
        top: 100px;
      }

With the absolute position, as you can see in the example above, the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any. If there is no closest parent positioned, it is placed relative to the initial containing block.

Fixed position

#fixed #middle {
        position: fixed;
        top: 0;
        left: 0;
      }

In the above example, by giving fixed position, the element is removed from the normal document flow, and no space is created for the element in the page layout. it stays fixed to the specific location we specify.

Conclusion

In short, we use css positions to set elements to our desired location, again MDN docs have a great resource on how the positions effect the element on the page. Thank you for taking the time to go through this short guide on positions, your valuable feedback is always appreciated.