The property positionis used to position an element within the page. However, depending on which property we use, the element will take one reference or another to position itself with respect to it.

The possible values ​​that the property can take positionare: static | relative | absolute | fixed | inherit | initial. I will explain what each of them consists of:

position: static

It is the value that an element takes by default to position itself. With this value, the element will respect the normal flow of the page, that is, it will be positioned in its proper place and will ignore the values ​​for the top, left, rightand properties bottom.

.rojo{
  height: 100px;
  width: 100px;
  background-color: red;
  border: 2px green solid;
}

#movido{
  left: 100px;
}

<div class="rojo"></div>
<div id="movido" class="rojo"></div>
<div class="rojo"></div>

Notice that I have put an id to the second div and called it movido. I am trying to apply the property leftwithout results.

position:relative

Through this value we can position an element with respect to the normal flow of the page. It could be said that we are positioning an element taking as reference the normal flow (the default position) of said element.

We can use top, left, rightand bottomto position our element taking as reference the default position of the element. In this case, I'm going to apply the property left: 100pxfrom the previous example and the div movidowill be shifted 100 pixels to the right from its default position.

.rojo{
  height: 100px;
  width: 100px;
  background-color: red;
  border: 2px green solid;
}

#movido{
  position: relative;
  left: 100px;
}

<div class="rojo"></div>
<div id="movido" class="rojo"></div>
<div class="rojo"></div>

position: absolute

This value will also accept the values top​​, left, rightand bottom. The element with position: absolutewill not be within the normal flow of the page and will take as reference the browser window or the closest positioned element (which has any value of positionexcept ) if it is the parent of the element we want to position.static

Here is an example of each:

Example taking the browser window as reference

In this case I'm going to take the browser window as a reference and move the div movido40 pixels down and 50 pixels to the right with respect to it.

You can see that the div movido, not being within the normal flow of the page, does not affect the normal flow of the rest of the elements and therefore the other two elements are positioned together (without respecting the space left by the div movidoin the previous example , in which it is in the normal flow of the page).

.rojo{
  height: 100px;
  width: 100px;
  background-color: red;
  border: 2px green solid;
}

#movido{
  position: absolute;
  top: 40px;
  left: 50px;
}

<div class="rojo"></div>
<div id="movido" class="rojo"></div>
<div class="rojo"></div>

Example taking as reference the parent element with position:relativeclosest

In this case, I have used the same CSS for the div with id movidoas in the previous example to show that in this case the div movidoreferences the parent element with position: relativeand not the browser window (40 pixels down and 50 pixels up). to the right of the parent element).

.rojo{
  height: 100px;
  width: 100px;
  background-color: red;
  border: 2px green solid;
}

#relativo{
  position: relative;
}

#movido{
  position: absolute;
  top: 40px;
  left: 50px;
}

<div class="rojo"></div>
<div id="relativo" class="rojo">
  <div id="movido" class="rojo"></div>
</div>

position: fixed

The elements that are positioned with position: fixedare also outside the normal flow of the page. However, it should not be confused with elements that are positioned with position: absolute.

Unlike the latter, elements with position: fixedtake the browser window as a reference and do not respect having a parent container that is positioned. Also, when scrolling the page, the element that is positioned as position: fixedwill remain in the same position relative to the browser window even if the scroll has moved the page down.

As a picture is worth a thousand words and taking as a reference the last example of the section position: absolute:

.rojo{
  height: 100px;
  width: 100px;
  background-color: red;
  border: 2px green solid;
}

#primerDiv{
  height: 2000px
}

#relativo{
  position: relative;
}

#movido{
  position: fixed;
  top: 40px;
  left: 50px;
}

<div id="primerDiv" class="rojo"></div>
<div id="relativo" class="rojo">
  <div id="movido" class="rojo"></div>
</div>

As you can see, the div movidois positioned with position: fixedrespect to the browser window regardless of whether it is contained in an element with position: relativeor whether the page is scrolled.

position: inherent

Actually the property positionwith the value inheritacts in the same way as the rest of the properties that can obtain this value, it inherits the value for this property from the parent element.

position: start

As with the previous value, it acts in the same way as the rest of the properties that can obtain this value, in this case making the property positiontake its default value, so using position: initial, would be the same as indicating position: static.

position: sticky

This is a value that is relatively new for this property.

Using this value, the element acts as if it were positioned with the value relativeuntil an offset threshold is reached (in the element itself or in the parent element), at which point the element becomes positioned as if it were positioned with the value fixed.

For example, we are going to take as a reference a horizontal menu that is at the top of the page under the logo of the company to which we belong.

Something like that:

+----------------------------------------------+
|                  LOGO                        |
|                                              |
+----------------------------------------------+
|               MENÚ RELATIVO                  |
+----------------------------------------------+
|                                              |
|                                              |
|                 CONTENIDO                    |
|                                              |
|                                              |
|                                              |
+----------------------------------------------+

And we want that when scrolling and the menu no longer fits on the screen (that is, the value of the property topis less than 0), the menu remains fixed at the top of the screen.

Something like that:

+----------------------------------------------+
|                  MENÚ FIJO                   |
+----------------------------------------------+
|                                              |
|                                              |
|                  CONTENIDO                   |
|                                              |
|                                              |
|                                              |
+----------------------------------------------+

For this we will use the value stickysince it will do the job for us without the need to use Javascript.

Usage would be like this:

#menu{
   position: sticky; /* Posicionamos el elemento con el valor sticky */
   /* Indicamos el umbral de desplazamiento con el cual el elemento pasará de comportarse 
   como position: relative a position: fixed, es decir, cuando el elemento tome el valor de
   top: 0 con respecto a la pantalla del navegador, este cambiará su comportamiento.*/
   top: 0; 
}

In this example you can scroll up and down to see that the div menufreezes when it reaches top: 0.

#marca{
  height: 50px;
  width: 100%;
  background-color: green;
  text-align: center;
}

#marca img{
  height: 100%;
}

#menu{
   position: sticky;
   top: 0; 
   height: 100px;
   width: 100%;
   background-color: red;
}

#contenido{
   height: 1200px;
   width: 100%;
   background-color: yellow;
}

<div id="marca">
  <img src="https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAARpAAAAJDMzZGRhNGMwLTU4YmMtNDdmZi1hMjU5LWIwYTViMjdlNWJmOQ.png">
</div>

<div id="menu"></div>
<div id="contenido">CONTENIDO</div>

However - and this is the main reason why I did not indicate it at the beginning of the answer as a property value position- it is not yet fully supported by all browsers.

You can see the browsers that support this property here .

BONUS: Typical examples.

Here are some typical examples of positioning (centering).

1.- Center div horizontally on the page (with position: relative)

#centrado{
  position: relative;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}

<div id="centrado"></div>

2.- Center div horizontally on the page (with position: absolute)

#centrado{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}

<div id="centrado"></div>

3.- Center div horizontally on the page (with position: static, default value)

#centrado{
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}

<div id="centrado"></div>

4.- Center div horizontally inside another div

#contenedor{
  position: relative;
  height: 300px;
  width: 300px;
  background-color: green;
}

#centrado{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}

<div id="contenedor">
    <div id="centrado"></div>
</div>

5.- Center div horizontally and vertically on the page

#centrado{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 100px;
  width: 100px;
  background-color: red;
}

<div id="centrado"></div>

6.- Center div vertically and horizontally inside another div

#contenedor{
  position: relative;
  height: 300px;
  width: 300px;
  background-color: green;
}

#centrado{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 100px;
  width: 100px;
  background-color: red;
}

<div id="contenedor">
   <div id="centrado"></div>
</div>

I think this question-article needs a summary:

Static: Default value. The element respects its position relative to the parent element and its siblings, which determines the order in which it is painted on the screen.

Relative: Frees the element from its original position and combined with top, bottom, left and right, allows us to move it with respect to it. The position of the rest of the elements is not affected.

Absolute: Same as relative, but the top, bottom, left, and right attributes will position it relative to the first parent element with a position value other than static or initial, or if not present, the HTML element. The freed space becomes occupied by the rest of the sibling elements.

Fixed: Identical to absolute except that the element is always positioned relative to the :root, so it is not affected by any scroll, not even the document scroll.

Inherit: Inherits the value of the direct parent.

Initial: Returns the initial value, which in this case is static.