A grandes rasgos, y como aprendimos en temas anteriores, si tenemos varios elementos en línea (uno detrás de otro) aparecerán colocados de izquierda hacia derecha, mientras que si son elementos en bloque se verán colocados desde arriba hacia abajo. Estos elementos se pueden ir combinando y anidando (incluyendo unos dentro de otros), construyendo así esquemas más complejos.
Hasta ahora, hemos estado trabajando sin saberlo en lo que se denomina posicionamiento estático (static), donde todos los elementos aparecen con un orden natural según donde estén colocados en el HTML. Este es el modo por defecto en que un navegador renderiza una página.
Sin embargo, existen otros modos alternativos de posicionamiento, que podemos cambiar mediante la propiedad position, que nos pueden interesar para modificar la posición en donde aparecen los diferentes elementos y su contenido.
A la propiedad position se le pueden indicar los siguientes valores:
| Valor | Significado |
|---|---|
| static | Posicionamiento estático. Utiliza el orden natural de los elementos HTML. |
| relative | Posicionamiento relativo. Los elementos se mueven ligeramente en base a su posición estática. |
| absolute | Posicionamiento absoluto. Los elementos se colocan en base al contenedor padre. |
| fixed | Posicionamiento fijo. Idem al absoluto, pero aunque hagamos scroll no se mueve. |
| sticky | Posicionamiento «pegado». Similar al relativo, usado para pegar menús a la parte superior. |
Si utilizamos un modo de posicionamiento diferente al estático (absolute, fixed, sticky o relative), podemos utilizar una serie de propiedades para modificar la posición de un elemento. Estas propiedades son las siguientes:
| Propiedad | Valor | Significado |
|---|---|---|
| top: | auto | |
Empuja el elemento una distancia desde la parte superior hacia el inferior. |
| bottom: | auto | |
Empuja el elemento una distancia desde la parte inferior hacia la superior. |
| left: | auto | |
Empuja el elemento una distancia desde la parte izquierda hacia la derecha. |
| right: | auto | |
Empuja el elemento una distancia desde la parte derecha hacia la izquierda. |
| z-index: | auto | |
Coloca un elemento en el eje de profundidad, más cerca o más lejos del usuario. |
Antes de pasar a explicar los tipos de posicionamiento, debemos tener claras las propiedades top, bottom, left y right, que sirven para mover un elemento desde la orientación que su propio nombre indica hasta su extremo contrario. Esto es, si utilizamos left e indicamos 20px, estaremos indicando mover desde la izquierda 20 píxeles hacia la derecha.
Pero pasemos a ver cada tipo de posicionamiento por separado y su comportamiento:
Posicionamiento relativo
Si utilizamos la palabra clave relative activaremos el modo de posicionamiento relativo, que es el más sencillo de todos. En este modo, los elementos se colocan exactamente igual que en el posicionamiento estático (permanecen en la misma posición), pero dependiendo del valor de las propiedades top, bottom, left o right variaremos ligeramente la posición del elemento.
Ejemplo: Si establecemos
left:40px, el elemento se colocará 40 píxeles a la derecha desde la izquierda donde estaba colocado en principio, mientras que si especificamosright:40px, el elemento se colocará 40 píxeles a la izquierda desde la derecha donde estaba colocado en principio.
Posicionamiento absoluto
Si utilizamos la palabra clave absolute estamos indicando que el elemento pasará a utilizar posicionamiento absoluto, que no es más que utilizar el documento completo como referencia. Esto no es exactamente el funcionamiento de este modo de posicionamiento, pero nos servirá como primer punto de partida para entenderlo.
Ejemplo: Si establecemos
left:40px, el elemento se colocará 40 píxeles a la derecha del extremo izquierdo de la página. Sin embargo, si indicamosright:40px, el elemento se colocará 40 píxeles a la izquierda del extremo derecho de la página.
Como mencionaba anteriormente, aunque este es el funcionamiento del posicionamiento absoluto, hay algunos detalles más complejos en su modo de trabajar. Realmente, este tipo de posicionamiento coloca los elementos utilizando como punto de origen el primer contenedor con posicionamiento diferente a estático.
Por ejemplo, si el contenedor padre tiene posicionamiento estático, pasamos a mirar el posicionamiento del padre del contenedor padre, y así sucesivamente hasta encontrar un contenedor con posicionamiento no estático o llegar a la etiqueta <body>, en el caso que se comportaría como el ejemplo anterior.
Posicionamiento fijo
El posicionamiento fijo es hermano del posicionamiento absoluto. Funciona exactamente igual, salvo que hace que el elemento se muestre en una posición fija dependiendo de la región visual del navegador. Es decir, aunque el usuario haga scroll y se desplace hacia abajo en la página web, el elemento seguirá en el mismo sitio posicionado.
Ejemplo: Si establecemos
top:0yright:0, el elemento se colocará justo en la esquina superior derecha y se mantendrá ahí aunque hagamos scroll hacia abajo en la página.
Posicionamiento sticky
El posicionamiento sticky se suele utilizar cuando queremos que un elemento se posicione en un lugar específico de forma fija («sticky», pegajoso), como por ejemplo, cuando al hacer scroll llegamos a un elemento y queremos que ese elemento se quede fijo en la parte superior mientras continuamos haciendo scroll. Este comportamiento es muy habitual con los menús superiores de las páginas o las cabeceras de secciones.
Otros posicionamientos
Existen otros valores de position como page o center, sin embargo, su soporte e implementación aún es muy temprana y no se sabe si su funcionalidad terminará ofreciéndose desde los diferentes navegadores.
Profundidad (niveles)
Es interesante conocer también la existencia de la propiedad z-index, que establece el nivel de profundidad en el que está un elemento sobre los demás. De esta forma, podemos hacer que un elemento se coloque encima o debajo de otro.
Su funcionamiento es muy sencillo, sólo hay que indicar un número que representará el nivel de profundidad del elemento. Los elementos un número más alto estarán por encima de otros con un número más bajo, que permanecerán ocultos detrás de los primeros.
Nota: Los niveles
z-index, así como las propiedadestop,left,bottomyrightno funcionan con elementos que estén utilizando posicionamiento estático. Deben tener un tipo de posicionamiento diferente a estático.
¿Quién soy yo?
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev