Tutorials Tonight's Logo


CSS position property is used to position an element on the web page.

CSS position property defines different types of positioning methods for the elements.

CSS Position property

There are five different types of positioning methods for elements:

  1. static
  2. relative
  3. fixed
  4. absolute
  5. sticky


position: value;

1).Position static

Position static is the default position value for any HTML element. It positions the element according to normal flow of the page.

The element positioned static is not affected by top,bottom,left and right properties.

2).Position relative

Position relative value sets the element relative to its normal value.

The position: relative; is followed by offsets either top,bottom,left and right.

3).Position fixed

Position fixed value is used to set an element fixed to the page at any spot. Regardless of the page scroll it doesn't move the element is fixed to its position.

The top, bottom, left and right property is used to set the element where it should be located.

4).Position absolute

Position absolute value is used to set the positioning of the element according to the nearest positioned parent. Incase none of its parents is positioned then the element will position itself according to the document body.

Note- The parent is called positioned only when it has any position value other than static.

The top, bottom, left and right property is used to set the element if required.

5).Position sticky

Position sticky value is used to make element fix or stick at any location. Beyond that location the element is free to move or scroll.

Note - This property needs at least one value among top,bottom,left and right.

Position sticky value toggle between relative and fixed. This property is generally used to stick any element or note at the top of a web page.