Positioning Properties

Static position:

Relative position:

Relative position, when applied on an element moves the element from its current position and makes it out of normal document flow (of stack like flow) and places the element on top of other normal elements. And the element below it in normal flow does not get moved at all if positioned element is moved but get possibly overlapped(or not depending on top/bottom/right/left values).

Possible attributes of absolute position are ::
top value moves the element from its current position by that much value pushing towards bottom (here 2 rem).
bottom value moves the element from its current position by that much value pushing towards top.
right value moves the element from its current position by that much value pushing towards right.
left value moves the element from its current position by that much value pushing towards left.
A snippet of html css in normal flow looks like this and just have a look at this resultant UI ::

//html
<div>
  <h1>
    This is amazing.This is amazing.This is amazing.This is amazing.This is amazing.This is amazing.
    This is amazing.This is amazing.This is amazing.This is amazing.
  </h1>
  
  <p>
  This is content.This is content.This is content.This is content.This is content.This is content.
  This is content.This is content.This is content.This is content.This is content.This is content.
  This is content.This is content.This is content.This is content.
  </p>
</div>

//css
div{
  border: 1px solid black;
}

h1{
  border: 1px solid black;
}

Now, upon applying a position relative on h1 element, it will be pushed below from its position on p element. A snippet of css in relative position looks like this and just have a look at this resultant UI ::

//css
div{
  border: 1px solid black;
}

h1{
  border: 1px solid black;
  position: relative;
  top: 2rem;
}

Hope you learned relative positioning well.

Absolute position:

Absolute position, when applied on an element moves the element from normal document flow in such a way that by default it places it on top left of viewport. And the element below it changes its position and also moves up to take the place of positioned element as if it was the first element.
Possible attributes of absolute position are ::
top value moves the element from its current position by that much value pushing towards bottom (here 2 rem).
bottom value moves the element from its current position by that much value pushing towards top.
right value moves the element from its current position by that much value pushing towards right.
left value moves the element from its current position by that much value pushing towards left.
A snippet of css in position absolute looks like this and just have a look at this resultant UI ::

//css
div{
  border: 1px solid black;
}

h1{
  border: 1px solid black;
  position: absolute;
  top: 2rem;
}

Please note that with absolute position you can place any html element anywhere on a webpage but always with respect to the browser and it is very special. Another popular usecase of absolute position is with respect to relative position which we will discuss in below section.

Special case of relative and absolute position:

Whenever we want to position an element inside another element not with respect to viewport then we use a combination of relative and absolute position.
So the trick is : relative position is applied to a parent and absolute position is applied to child element. and child element will always rotate inside the parent container. Have a look at this resultant image::

A very simple snippet looks like this:

//html
<div class="parent">
  <p class="child">content</p>
</div>

// css
.parent{
  position: relative; // applied on parent
}

.child{
  position: absolute; // applied on child
  bottom: 2rem;
}

Fixed Position:

Position fixed when applied will make the element fixed on the browser and even when we scroll the webpage, it will still be on the same place on the webpage always visible.

Possible attributes of fixed position are ::
top value moves the element from its current position by that much value pushing towards bottom (here 2 rem).
bottom value moves the element from its current position by that much value pushing towards top.
right value moves the element from its current position by that much value pushing towards right.
left value moves the element from its current position by that much value pushing towards left.
A very simple snippet looks like this:

//html
<div class="parent">
  Some content
</div>

// css
.parent{
  position: fixed; 
  top: 2rem;
}

Also remember that special case of relative and absolute work the same way if we replace relative with fixed position and keep child as absolute. Then absolute will rotate inside fixed parent element.
Please not that that when we want some element to be always fixed with respect to viewport then we use this positioning.

Sticky Position:

Position sticky when applied will make the element scroll on the browser until the top/bottom /right/left value and then stick on the browser. All the other element is scrollable except this sticky positioned element.

Possible attributes of sticky position are ::
top value moves the element from its current position by that much value pushing towards bottom (here 2 rem).
bottom value moves the element from its current position by that much value pushing towards top.
right value moves the element from its current position by that much value pushing towards right.
left value moves the element from its current position by that much value pushing towards left.
A very good use case with a simple snippet looks like this:

//html
<p>
Wow, we are learning a new positioning
  which will stick somewhere.
</p>

<div>
  <p class="first">A</p>
  <p>Andrew W.K.</p>
  <p>Apparat</p>
  <p>Arcade Fire</p>
  <p>At The Drive-In</p>
  <p>Aziz Ansari</p>
  
  <p>
  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a
  </p>
  
  <p>piece of classical Latin literature from 45 BC, making it over 2000 years old. </p>
  <p>
  Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of
  </p>
  
  <p>
  Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of
  </p>  
</div>

//css
.first {
  position: sticky;
  top: -1px;
}