Position: relative;

position: relative; allows an element to be moved relative to itself.

This means that the element can only be moved from its default starting position.

When you add top, bottom, left or right values, they push the element away from its original position. Meaning left moves the element to the right and so on. You can see this demonstrated in the embedded CodePen below.

Some of the things you will be able to spot are:

• The element can be moved up, down, left or right relative to it's original place.
• Does not offset or move other static elements, rather it is imposed over them, creating a stacking effect.

See the Pen position: relative; by Tim (@timcode21) on CodePen.

Two other important features of position: relative; are:

1. By default position: relative; elements overlay ordinary static elements. This also means that z-index can be used on relative elements, to change their depth in the document.
2. Elements within the Relative element can be Absolutely set.

Position: absolute;

position: absolute;

An element with position: absolute; is removed from the normal flow of a document, and effectively placed on a different level to other elements. This means that it has no place it belongs, other than relative to its closest positioned ancestor element (if it even has one).

Before you start feeling sorry for absolute elements, you should know that they can be moved anywhere in the document and overlay any other element.

It must be noted here that with great power comes great responsibility. While being removed from the flow of the document, and the influence of other elements, has it's upsides, it also has one drawback; it can introduce a level of inflexibility. Having absolute elements sprinkled all over the place can make responsive design a lot more complicated

Finally, like position: relative; a position: absolute;element can be manipulated with top, bottom, left and right values.

See the Pen position: absolute; by Tim (@timcode21) on CodePen.

Position: fixed;

position: fixed;

Similarly to position: absolute;, position: fixed; elements are removed from the flow of the document. They can also be manipulated with the top, bottom, left and right values.

The main points of difference are that:

1. The element's position is relative to the viewport (browser window).
2. The element is fixed in place, so when the the page is scrolled, it will retain its position

Examples of a position: fixed;element are scrollbars and navigation bars on web pages that follow the user as they scroll.

click and drag the scrollbars on the CodePen below to see a position: fixed;element at work:

See the Pen Untitled by Tim (@timcode21) on CodePen.