¿Cual es la diferencia entre position: relative, position: absolute y position: fixed?

publicado por: Anonymous

Sé que estas propiedades de CSS sirven para posicionar un elemento dentro de la página.

Sin embargo, ¿cuándo debería usar cada una de ellas?

solución

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.

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

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.

_x000D_

_x000D_

.rojo{_x000D_
  height: 100px;_x000D_
  width: 100px;_x000D_
  background-color: red;_x000D_
  border: 2px green solid;_x000D_
}_x000D_
_x000D_
#movido{_x000D_
  position: relative;_x000D_
  left: 100px;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

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

_x000D_

_x000D_

.rojo{_x000D_
  height: 100px;_x000D_
  width: 100px;_x000D_
  background-color: red;_x000D_
  border: 2px green solid;_x000D_
}_x000D_
_x000D_
#movido{_x000D_
  position: absolute;_x000D_
  top: 40px;_x000D_
  left: 50px;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

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

_x000D_

_x000D_

.rojo{_x000D_
  height: 100px;_x000D_
  width: 100px;_x000D_
  background-color: red;_x000D_
  border: 2px green solid;_x000D_
}_x000D_
_x000D_
#relativo{_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
#movido{_x000D_
  position: absolute;_x000D_
  top: 40px;_x000D_
  left: 50px;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

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:

_x000D_

_x000D_

.rojo{_x000D_
  height: 100px;_x000D_
  width: 100px;_x000D_
  background-color: red;_x000D_
  border: 2px green solid;_x000D_
}_x000D_
_x000D_
#primerDiv{_x000D_
  height: 2000px_x000D_
}_x000D_
_x000D_
#relativo{_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
#movido{_x000D_
  position: fixed;_x000D_
  top: 40px;_x000D_
  left: 50px;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

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

En este ejemplo podéis hacer scroll hacia arriba y hacia abajo para ver que el div menu se queda fijo cuando alcanza top: 0.

_x000D_

_x000D_

#marca{_x000D_
  height: 50px;_x000D_
  width: 100%;_x000D_
  background-color: green;_x000D_
  text-align: center;_x000D_
}_x000D_
_x000D_
#marca img{_x000D_
  height: 100%;_x000D_
}_x000D_
_x000D_
#menu{_x000D_
   position: sticky;_x000D_
   top: 0; _x000D_
   height: 100px;_x000D_
   width: 100%;_x000D_
   background-color: red;_x000D_
}_x000D_
_x000D_
#contenido{_x000D_
   height: 1200px;_x000D_
   width: 100%;_x000D_
   background-color: yellow;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

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)

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

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

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

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

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

4.- Centrar div horizontalmente dentro de otro div

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

5.- Centrar div horizontalmente y verticalmente en la página

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

6.- Centrar div verticalmente y horizontalmente dentro de otro div

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *