CSS Layout - The position Property

The position property specifies the type of positioning method used for an element. The five possible values for position are:

• static
• relative
• fixed
• absolute
• sticky

position: static;

HTML elements are positioned static by default.

• Static-positioned elements are not affected by the top, bottom, left, and right properties.
• They are always positioned according to the normal flow of the page.

Example of position: static;

div.static {
  position: static;
  border: 3px solid #73AD21;
}

CSS Layout - position: relative;

An element with position: relative; is positioned relative to its normal position in the document flow.

• Setting the top, right, bottom, and left properties on a relatively-positioned element will cause it to be adjusted away from its normal position.
• Other content will not be adjusted to fit into any gap left by the element.

Example of position: relative;

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

CSS Layout - position: fixed;

An element with position: fixed; is positioned relative to the viewport, meaning it will stay in the same place even when the page is scrolled.

• The top, right, bottom, and left properties are used to position the element.
• A fixed element does not leave a gap in the page where it would normally have been located.

Example of position: fixed;

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}