Skip to main content
2 de 4
se añadieron 3126 caracteres en el cuerpo
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64

La propiedad position sirve para posicionar un elemento dentro de la página. Sin embargo, dependiendo de cual sea la propiedad que usemos, el elemento tomará una referencia u otra para posicionarse respecto a ella.

Los posibles valores que puede adoptar la propiedad position son: static | relative | absolute | fixed | inherit | initial. Voy a explicar en que consiste cada uno de ellos:

position: static

Es el valor que toma un elemento por defecto para posicionarse. Con este valor, el elemento respetará el flujo normal de la página, es decir, se posicionará en el lugar que le corresponde y no tendrá en cuenta los valores para las propiedades top, left, right y 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>

Fíjate en que he puesto un id al segundo div y lo he llamado movido. Le estoy intentando aplicar la propiedad left sin resultados.

position: relative

Mediante este valor podemos posicionar un elemento respecto al flujo normal de la página. Se podría decir que estamos posicionando un elemento tomando como referencia el flujo normal (la posición por defecto) de dicho elemento.

Podremos usar top, left, right y bottom para posicionar nuestro elemento tomando como referencia la posición por defecto del elemento. En este caso, voy a aplicarle la propiedad left: 100px del ejemplo anterior y el div movido se desplazará 100 pixeles a la derecha desde su posición por defecto.

.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

Este valor también aceptará los valores top, left, right y bottom. El elemento con position: absolute no estará dentro del flujo normal de la página y tomará como referencia la ventana del navegador o el elemento posicionado (que tenga cualquier valor de position excepto static) más cercano si es padre del elemento que queremos posicionar.

A continuación te muestro un ejemplo de cada uno:

Ejemplo tomando como referencia la ventana del navegador

En este caso voy a tomar como referencia la ventana del navegador y desplazar el div movido 40 pixeles hacia abajo y 50 pixeles a la derecha respecto a esta.

Puedes observar que el div movido, al no estar dentro del flujo normal de la página, no afecta al flujo normal del resto de elementos y por lo tanto los otros dos elementos se posicionan juntos (sin respetar el espacio que deja el div movido en el ejemplo anterior, en el cual sí que está en el flujo normal de la página).

.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>

Ejemplo tomando como referencia el elemento padre con position:relative más cercano

En este caso, he utilizado el mismo CSS para el div con id movido que en el ejemplo anterior para que se viera que en este caso el div movido toma como referencia el elemento padre con position: relative y no la ventana del navegador (40 pixeles hacia abajo y 50 pixeles hacia la derecha respecto del elemento padre).

.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

Los elementos a los cuales se les posiciona con position: fixed también están fuera del flujo normal de la página. Sin embargo, no se debe de confundir con los elementos que están posicionados con position: absolute.

A diferencia de estos últimos, los elementos con position: fixed toman como referencia la ventana del navegador y no respetan el tener un contenedor padre que esté posicionado. Además, al hacer scroll en la página, el elemento que esté posicionado como position: fixed seguirá en la misma posición respecto a la ventana del navegador aunque el scroll haya desplazado la página hacia abajo.

Como una imagen vale más que mil palabras y tomando como referencia el último ejemplo del apartado 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>

Como puedes observar, el div movido está posicionado con position: fixed respecto a la ventana del navegador independientemente de que esté contenido en un elemento con position: relative o de que se realice un scroll sobre la página.

position: inherit

Realmente la propiedad position con el valor inherit actúa de la misma manera que el resto de propiedades que pueden obtener este valor, hereda el valor para esta propiedad del elemento padre.

position: initial

Igual que con el valor anterior, actúa de la misma manera que el resto de propiedades que pueden obtener este valor, en este caso haciendo que la propiedad position tome su valor por defecto, por lo que, usando position: initial, sería lo mismo que indicar position: static.

position: sticky

Este es un valor que es nuevo relativamente para esta propiedad.

Usando este valor, el elemento actúa como si estuviera posicionado con el valor relative hasta que se alcanza un umbral de desplazamiento (en el propio elemento o en el elemento padre), con el cual el elemento pasa a posicionarse como si estuviera posicionado con el valor fixed.

Por ejemplo, vamos a tomar como referencia un menú horizontal que está en la parte superior de la página debajo del logo de la empresa a la que pertenecemos.

Algo así:

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

Y queremos que cuando al hacer scroll y el menú ya no quepa en la pantalla (es decir, el valor de la propiedad top sea menor que 0), el menú quede fijo en la parte superior de la pantalla.

Algo así:

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

Para ello emplearemos el valor sticky ya que nos hará el trabajo sin necesidad de usar Javascript.

El uso sería así:

#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; 
}

Sin embargo -y es el motivo principal por el que no lo he indicado al inicio de la respuesta como valor de la propiedad position- todavía no está totalmente soportado por todos los navegadores.

Puedes ver los navegadores compatibles con esta propiedad aquí.

BONUS: Ejemplos típicos.

Estos son algunos ejemplos típicos sobre posicionamiento (centrado).

1.- Centrar div horizontalmente en la página (con position: relative)

#centrado{
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>

2.- Centrar div horizontalmente en la página (con position: absolute)

#centrado{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>

3.- Centrar div horizontalmente en la página (con position: static, valor por defecto)

#centrado{
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}
<div id="centrado"></div>

4.- Centrar div horizontalmente dentro de otro 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.- Centrar div horizontalmente y verticalmente en la página

#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.- Centrar div verticalmente y horizontalmente dentro de otro 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>

Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64