CSS position property

Usage

Determines how an element is placed on the page.

Values

  • static - default; the element will be placed in its normal position within the flow of the page
  • relative - moves the element relative to its static position. The element is positioned using top, bottom, left, right followed by a distance
  • absolute - specifies exact coordinates where the element should be positioned. The element is positioned using top, bottom, left, right followed by a distance
  • fixed - similar to absolute but the element will stay fixed in relation to the browser window, so that when the page is scrolled, the element does not move on the screen. The element is positioned using top, bottom, left, right followed by a distance

Example

Code:

div {
  position: relative;
  left: 20px;
  top: 100px;
}

div {
  position: absolute;
  top: 30px;
  right: 10px;
}