CSS POSITION


The CSS Position property is used to specify the type of positioning that is used for an element. There are 5 different positions:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Once a position property is applied (except default i.e static), the element can be positioned using the top, left, bottom, and right properties.


Static


All HTML elements are positioned static by default. These elements are not affected by the top, bottom, left and right properties. These elements are positioned normally as the browser displays them by default.


Relative


Any element that has position: relative; will be positioned relative to its actual/default position. When the top, left, bottom, and right properties are set for an element with relative position, it will move away from its default position, and space will be added/removed from the top, bottom left, and right as the user sets.



div.position-relative {
  position: relative;
  left: 30px;
  background: rgb(174, 255, 198);
}
Live Demo!


Output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices finibus faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada lacus nec dapibus euismod. Suspendisse potenti. Donec luctus ultrices tincidunt. Aliquam iaculis ut augue non tincidunt. Vestibulum at ante tincidunt ante ullamcorper convallis in a tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Due to left:30px;, the content is pushed towards the right.


Fixed


Any element that has position: fixed; will be positioned relative to the viewport so any top, bottom, left and right properties applied will position the element relative to the viewport and is fixed at the spot. 



div.position-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  background: DodgerBlue;
}
Live Demo!


Absolute


Any element that has position: absolute; will be positioned relative to a positioned parent element. If there is no positioned element as a parent, the absolutely positioned element will be positioned relative to the document’s body and will scroll with the document.



div.relative {
  position: relative;
  width: 400px;
  height: 300px;
  background-color: Tomato;
}
div.absolute {
  position: absolute;
  bottom: 40px;
  right: 0;
  width: 350px;
  height: 140px;
  background-color: DodgerBlue;
  color: white;
}
Live Demo!


Output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices finibus faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada lacus nec dapibus euismod. Suspendisse potenti.


Sticky


Any element with position: sticky; will be positioned based on the scroll that user does. The sticky element will toggle between relative and fixed positioning depending on the scroll. As soon as a offset position is reached on parent, the sticky element will be fixed at the spot.



div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: rgb(13, 146, 255);
  border: 2px solid #2b40ff;
}
Live Demo!