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