CSS Position

The Position Property is used to specify the type of position method used for an element. Different positions which a user can set are :

  • Static
  • Relative
  • Fixed
  • Absolute

The contents can be positioned using top,bottom,left and right properties . These properties work with position .


Position : Static

CSS helps you to position your HTML element. In HTML elements are positioned static by default. Static positioned elements are not affected by top,bottom,left and right properties.

Example of Position: static

Output :
This div element has position: static;

Position : relative

Relative positioning changes the position of the HTML element relative to where it normally appears. After Setting the top, bottom, right, and left properties of a relatively-positioned element will result it to be adjusted away from its normal/default position. Other content which are given will not be adjusted to fit into any gap left by the element.

Example of Position: relative
Output
This div element has position: relative;

Position : fixed

An element with position: fixed; is positioned relative to the viewport, it means that it always positioned in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

Example of Position: fixed

Output :See the right bottom corner a blue border box which is fixed after scrolling.
This div element has position: fixed;

Example

Try It Yourself