position

Syntax

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;

Static

• The element is positioned according to the normal flow of the document. The top", right", bottom", left", and z-index" properties have no effect. This is the default value.

HTML
<div class="container">
  <div class="sibling"></div>
  <div class="target"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
</div>
target
sibling
container
viewport

Relative

• The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

HTML
<div class="container">
  <div class="sibling"></div>
  <div class="target"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
</div>
target
sibling
container
viewport

Absolute

• The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.

HTML
<div class="container">
  <div class="sibling"></div>
  <div class="target"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
</div>
target
sibling
container
viewport

Fixed

• The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block.

HTML
<div class="container">
  <div class="sibling"></div>
  <div class="target"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
</div>
target
sibling
container
viewport

Sticky

• The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block.

HTML
<div class="container">
  <div class="sibling"></div>
  <div class="target"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
  <div class="sibling"></div>
</div>
target
sibling
container
viewport