tutorialstonight logo
A Platform To Learn To Code

CSS POSITION



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


Syntax

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.

Example

Run the code

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.

Example

Run the code

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.

Example

Run the code

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.

Example

Run the code

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.

Example

Run the code