77

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?

1
  • 10
    Al que le ha dado voto negativo a la pregunta. Agradecería que añadieras el motivo, así podría aprender sobre que le puede faltar/ le sobra a la pregunta. Muchas gracias :) Commented el 7 dic. 2016 a las 20:57

2 respuestas 2

119
+100

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

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.

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

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

5
  • 4
    He añadido algunos ejemplos típicos. Si creéis que falta algún ejemplo típico/básico sobre posiconamiento no dudéis en ponerlo en los comentarios. Commented el 7 dic. 2016 a las 21:55
  • Muy buena explicación, pero si lo complicamos un pelín mas, como sería posible hacer lo siguiente: Si tienes un contenedor con position: relative, y quieres meter dentro una imagen por ejemplo, y que esta imagen quede totalmente al borde del scroll horizontal e incluso cortando la imagen fuera de la ventana de navegador, pero que no aparezca scroll horizontal.... como se haría? Se que metiendo un overflow: hidden puedes cortar ese trozo que se sale de la pantalla, pero en ciertos casos lo que se busca es que en función de la resolución de ancho, se vea mas trozo de la imagen o menos....
    – ptazta
    Commented el 19 sept. 2017 a las 9:01
  • Realmente no queda muy claro lo que quieres obtener. De todas formas, esto tendría que ser un comentario (aunque ahora no tienes reputación suficiente para ello). Te recomiendo que abras una pregunta como te comenta @GDP dejando una explicación más detallada de lo que quieres y si puedes agregar algo de código y alguna imagen del resultado a obtener sería mucho más fácil ayudarte. Commented el 19 sept. 2017 a las 10:09
  • 3
    Que gran respuesta!!! Realmente gente como tu son quines nos permiten hacer comunidad. Genio! Commented el 28 may. 2019 a las 17:47
  • Muy buena respuesta. Antes no me quedaba claro lo de la propiedad position, y me liaba buscando tutoriales por internet, pero ahora ya me ha quedado claro todo. Muchas gracias por todo!!
    – Euricky999
    Commented el 10 ago. 2023 a las 8:55
10

Creo que esta pregunta-artículo necesita un sumario:

Static: Valor por defecto. El elemento respeta su posición respecto del elemento padre y sus hermanos que determina el orden en el que se pinta en pantalla.

Relative: Libera al elemento de su posición original y combinado con top, bottom, left y right, nos permite desplazarlo respecto a ella. La posición del resto de elementos no es afectada.

Absolute: Igual que relative, pero los atributos top, bottom, left y right lo posicionarán respecto del primer elemento padre con un valor de position diferente a static o initial o en caso de no existir, del elemento HTML. El espacio liberado pasa a ser ocupado por el resto de elementos hermanos.

Fixed: Idéntico a absolute excepto que el elemento se posiciona siempre respecto del :root, por lo que no es afectado por ningún scroll, ni siquiera el del documento.

Inherit: Hereda el valor del padre directo.

Initial: Le devuelve el valor inicial que en este caso es static.

0

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.