Hi there today i will be taking you through various types of CSS positions. When we have to set the position of any element we use the Css property position. We can decide where to position that element like top, right, bottom and left.

Types of CSS Positions:

Static
Relative
Absolute
Fixed
Sticky

1. Static

Static is the default position of HTML elements. Since by default elements are static so these are not affected by positioning properties : top, right, bottom and left. We use static position like this position : static. Example:

div.static {
 position : static;
 background-color : orange;
 text-align : center; 
 border: 2px solid #1f1f1f;
}

2. Relative

Relative position is also like static position but only difference is that in relative position the positioning properties : top, right, bottom and left, will affect the positions of the element. So if we use these positioning properties in relative position then the position of the element will become relative to its original position. Example:

div.relative {
position : relative;
top : 50px;
right : 100px;
border : 2px solid #1f1f1f;
}

3. Absolute

When we use absolute position then its elements are removed from the normal document flow and all other elements acts as if that element is no longer exist in the document. Also for absolute position to work, the parent element must have a position property value other than the default of static like relative or absolute. Example:

div.relative {
position : relative;
top : 50px;
right : 100px;
border : 2px solid #1f1f1f;
}

div.absolute {
position : absolute;
top : 150px;
left: 50px;
border : 5px solid #1f1f1f;
color : red;
width : 200px;
}

4. Fixed

Fixed position is also like absolute positioning but only difference is that in fixed positioning the element gets fixed to a position that we want. Mostly these are used for navigation bars in a website in which no matter where we scroll on the page the navigation bar always remain visible at the top of the page.

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 500px;
  color : #cc0000;
  border: 5px solid #f3789j;
}

5. Sticky

Sticky position is a mix of both relative positioning and fixed positioning. It will acts as a relatively positioned element until the page will reach a given scroll point : top, right, bottom, left values, and once it reaches that scroll point then it will behave as a fixed position element.

position : sticky;
top : 50px;
background-color : #cc0000;
border: 5px solid #1f1f1f;

Thanks for reading my article on CSS : POSITIONS. Kindly leave your feedback inside comment section below.

Css : Positions