Positioning — CSS

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

Static position:

This is the default position for all the HTML elements. With the static position the elements are displayed on the order they are declared on the .html file. On the static positioned elements cannot be used top, left, right and bottom propeties.

div.static{
  position:static;  
  background-color: #eee2df;
}

Relative position:

Relative positione elements are positioned relative to their normal position. The element is positioned relative by using the top, left, bottom and right properites.

div.relative{
  position:relative;  
  background-color: #eed7c5;
  top:0;
  left:0;
}

Let’s now position it 100px from top:

The other elements are not adjusted to fill the space left from moving the middle div. So the relative position doesn’t affect the elements that are around it.

div.relative{
  position:relative;  
  background-color: #eed7c5;
  top:100px;
  left:0;
}

Absolute position:

The absolute positioned elements are positioned relative to their nearest positioned element. As you can see unlike the relative position element the absolute position element is removed from the document flow and positioned absolute.

div.absolute{
  position:absolute;  
  background-color: #c89f9c;
  width:100px;
  height:100px;
}

If none of the ancestor elements has relative position then the absolute element uses it’s document body.

div.absolute{
  position:absolute;  
  background-color: #c89f9c;
  top:0;
  left:0;
}

Let’s now add an absolute div inside a relative positioned div. As you can see at the picture below it is positioned 50px left and 50px top from the relative div:

<div class="static">This is a <b>static</b> div</div>
<div class="relative">
   This is a <b>relative</b> div
   <div class="absolute">This is a <b>absolute</b> div</div>
</div>
<div class="static">This is a <b>static</b> div</div>
div.absolute{
  position:absolute;  
  background-color: #c89f9c;
  top:50px;
  left:50px;
}

Fixed position:

A fixed positioned element is positioned relative to the viewport of the window and stays fixed to it when scrolling the document. Also on fixed positined elements we use top, left, bottom and right properties to position it.

div.fixed{
  position:fixed;  
  background-color: #c97c5d;
  top:0;
  left:0;
  right:0;
}

Sticky position:

Sticky positioned elements are something between relative and fixed position. It is positioned relative until a given offset position is met in the viewport — then it “sticks” in place (like position:fixed)

div.sticky{
  position:sticky;  
  background-color: #b36a5e;
  top:0;
}