Position
Definición
Es la propiedad que permite posicionar a los elementos en casi cualquier posición de la página.
Premisas importantes
-
Por defecto, el valor es:
position: static;
-
Para poder posicionar mediantes las diferentes propiedades, hay que cambiar el valor de
position
para que deje de serstatic
-
Una vez se aplica a
position
cualquiera de los valoresfixed
oabsolute
, el elemento deja de existir en el Document Flow (pero sigue presente con su ancho reducido, pasando a ser un elemento de tipo inline-block ) y los siguientes elementos ocupan su espacio. -
El posicionamiento se puede aplicar tanto a elementos en línea como en bloque (por supuesto también inline-block).
Puede tener los siguientes valores:
-
static
Es el valor que viene por defecto.
-
fixed
-
Una vez posicionado el elemento con este valor, su posición será FIJA, es decir, que al hacer scroll ni subirá ni bajará, siempre estará anclada en el mismo lugar.
-
El elemento pasa a ir de la mano con el viewport (toda la pantalla o lo que ocupa la ventana del navegador), es decir, más allá incluso de la tag
html
.
Al ponerle por ej.top: 0;
y quitarle los márgenes al elemento (margin: 0;
) si los tuviera, se puede apreciar cómo el elemento se pega arriba del todo de la página (si pusiéramosbottom: 0;
se pegaría a la parte más baja de la ventana o viewport). - Ver ejemplo
-
-
absolute
-
Si el elemento que la recibe NO está dentro de otro elemento que tenga también la propiedad
position
aplicada, entonces su referencia es el elemento (o tag)html
(comporobarlo aplicándole:.element { position: absolute; top: 0; left: 0 }
(si el elemento a posicionar tiene márgenes aplicados o por defecto, entonces tamibén añadirmargin: 0
Veremos que queda pegado al elementohtml
inspeccionándolo. -
Si el elemento que la recibe SÍ está dentro de otro elemento que tenga también la propiedad
position
aplicada (y searelative
), entonces su referencia es este otro elemento (comprobarlo añadiéndole el código de arriba al elemento que queramos posicionar yposition: relative;
al elemento donde queramos que se meta).
Veremos que ahora, al aplicarletop, bottom, right o left
las distancias van a ser respecto al elemento donde esté metido (es decir, que tengaposition: relative
, ya no será el elemento o taghtml
. - Ver ejemplo aquí inspeccionando 'PURO CSS!'
(.product-overview__badge) y la
section
(.product-overview) en la que se encuentra.
-
-
relative
-
Al aplicar este valor, los elementos SÍ SIGUEN estando presentes en el Document Flow, a diferencia de
fixed
yabsolute
.Por tanto, si posicionamos un elemento con
Ver ejemplorelative
donde sea, los siguientes elementos no subirán a ocupar su espacio, ya que sigue estando presente en el Document Flow.
-
-
sticky
-
El elemento está fijo en el viewport hasta que haciendo scroll se llega al final del contenido de su padre.
-
Hay que añadirle siempre
top, bottom, right o left
para que tenga efecto. -
Inspeccionar y probar funcionamiento aquí.
-
Propiedad relacionada importante: z-index
- Su valor por defecto es auto o 0
- SOLO AFECTA a elementos que tengan la propiedad
position
distinta destatic
(valor por defecto) y a elementos flexbox - Si queremos que el elemento que reciba la propiedad esté por encima de otro, usar un número mayor que 0
- Si queremos que el elemento que reciba la propiedad esté detrás de otro, usar un número menor que 0
-
Cuando usamos
position: fixed;
los elementos que vienen a continuación ocupan el espacio que antes ocupaba el elemento que ha recibido dicha propiedad, ya que desaparece del Document Flow.
Por ello, si por ejemplo el elemento que ha recibidoposition: fixed;
es un div cuyo fondo es una imagen, o una imagen en sí, aparecerá sobre los elementos siguientes, que acaban de "subir" y ocupar su espacio, pero los "tapa" dicha imagen. Por tanto, para poder mandar este div o imagen detrás de los elementos y así poder visualizarlos, quedando la imagen de fondo, usaríamosz-index: -1;
-
Si un elemento x con
position: fixed;
está situado en elhtml
pòr debajo del elemento y (con tambiénposition: fixed;
), el elemento x será el que "suba" a ocupar el espacio que ha dejado y al salirse del Document Flow y aparecerá por delante. -
Cuando dos elementos tengan
position: fixed;
y tambiénz-index
cada uno, estará por delante el elemento cuyo valor dez-index
sea mayor. Ejemplo:
Si x tienez-index: 5
e y tienez-index: 6
, y aparecerá por delante.
Al revés, si x tienez-index: -2
e yz-index: -3
, y aparecerá por detrás de x.