Voy a explicar, desarrollándo un sencillo, ejemplo práctico, la propiedad position, que vereís, es imprescindible dominar, junto con alguna otra propiedad de CSS, para situar, a nuestro gusto, los elementos ú objetos, en las páginas web.
La propiedad position, puede adoptar, estos cinco valores:
position: static:
Valor por defecto, de esta propiedad, osea la que adopta, si tu no le declarás otra, suele decirse entonces, que no esta posicionado, pues los elementos, se presentan en la página, según seá su orden, en el archivo html, los elementos, no obedecen a los valores: left, right, top y bottom (izquierda, derecha, arriba y abajo), a los que podrías asignarles, un valor, para posicionarlos en la página, ni a la propiedad z-index, que nos sirve para determinar, el orden de visualización de capas u objetos sobrepuestos.
position: relative:
Con este valor, de la propiedad, los elementos respetan el flujo del documento y ya si obedecen a los parametros left, right, top y bottom. Adoptan su posición, con respecto, a la que tendrían, en position static.
position: absolute:
Cuando le damos este valor a algún elemento, no obedecera al flujo del documento, por lo que pueden producirse solapamientos de objetos. El elemento, tomara los valores de left, right, top y botton, con respecto a su elemento padre, y si este no tiene posición, lo hará con respecto al body, del documento.
position: fixed:
Los elementos u objetos, con este valor de position, se comportan, básicamente como en position absolute, pero además, estaran fijados, sin obedecer al scroll, de la página.
position: sticky:
Este valor, es el último incorporado, con CSS3, y es un hibrido entre las posiciones relative y fixed. El elemento se comportará como relative, hasta que haciendo scroll, lleguemos al tope de su contenedor padre, y se quede fijo.
A los parámetros, left, right, top y bottom, (izquierda, derecha, arriba y abajo), podemos asignarle los valores en medidas, ej: px, ems, etc, ó en porcentajes (%).
Vamos a ver un sencillo ejemplo, para entender mejor todo esto, con el siguiente código:
Así se verán, en la ventana de cualquier navegador, nuestros <div> ó contenedores:
Hay que hacer dos observaciones, en primer lugar en mi CSS declaro la position static, que es innecesario, pues como ya he dicho anteriormente, es el valor por defecto de la propiedad position.
Y en segundo lugar observareis que le he asignado valores a top y left (a efectos de seguir desarrollando el ejemplo), pero como las cajas, tienen position static, no obedecen a estos valores.
Para ir viendo los valores de position y sus comportamientos, a nuestro ejemplo anterior, vamos a hacerle una ligera variación, y es declarar el valor de position de nuestro <div> .caja-tres, de static a relative, dejando igual todo lo demás.
Y así es como se colocarían nuestras cajas:
Dandole valor de position relative al <div> .caja-tres vemos que yá si obedece a los valores de top y left que tenía asignados, con este valor de position, respeta el flujo del documento y, adoptá su posición, respecto a la que tendría, en position: static;.
Ahora cambiamos nuevamente a nuestro <div> .caja-tres la propiedad position de relative a absolute.
Y así se posicionarían ahora nuestras capas:
Bueno con nuestro <div> .caja-tres en position absolute, vemos que en primer lugar la caja, no sigue el flujo del documento pues se ha situado fuera de su caja contenedora el <div> .caja-dos. Esto ha sucedido porque la caja dos no está posicionada, entonces la caja tres se posicioná en sus valores de top y left, pero con respecto al body del documento.
Por tanto vemos que las cajas o cualquier elemento de la página que este en position absolute ó fixed, se salen del flujo del documento y pueden superponerse o solapar a otros objetos.
Ahora siguiendo con el desarrollo del ejemplo voy a darle position relative al <div> .caja-dos y seguire dejando en position absolute el .caja-tres.
Y esto es lo que sucedería:
Ahora tenemos posicionadas las cajas dos y tres, por tanto la caja dos que tiene position relative sigue el flujo del documento y se coloca en sus valores de top y left, con respecto a cual erá su posición estática.
En este caso la caja tres con position absolute, también respeta sus valores top y left, pero con respecto a su caja padre, ya que ahora si tiene position.
Su position absolute, provoca que se salga, del flujo del documento.
Vamos con otro supuesto de nuestro ejemplo, ahora asignaremos a nuestros <div> .caja-dos y .caja-tres position absolute.
A ver, como se posicionarían nuestras cajas con estos valores:
Pues en este caso, ocurre lo previsto, como ya he dicho, la caja dos, en position absolute, y sin tener ningún elemento previo posicionado, se sale del flujo del documento y al adoptar su posición (top y left), lo hace con respecto al body y solapa a la caja uno.
La caja tres con position absolute también, como su capa padre, es la dos y si tiene position, adoptá sus valores de top y left, con respecto a está y las dos capas en position absolute, salen del flujo del documento.
Para ir terminando con este ejemplo, vamos a ver un último supuesto, en el que le asignaremos position relative, al <div> .caja-uno, y position absolute, al <div> .caja-dos, dejándo sin posicionar, el <div> .caja-tres, osea, en su position static, por defecto.
Y lo siguiente es lo que visualizariamos:
Es un escenario muy similar al anterior, donde vemos que la caja-uno, yá responde a sus valores de top y left,
la caja-dos, que mantiene su position absolute, sale del flujo del documento y solapa a la primera, con la propiedad z-index, podríamos decidir que capa visualizar encima, los elementos con position absolute, tienen más z-index, que los posicionados en relative,
y por último la caja-tres en position static se situa al principio de su capa padre.
Para que puedas seguir observándo los valores de la propiedad position, he preparado abajo un contenedor que tiene una position relative y una altura (height), inferior a los elementos que contiene, para que al hacer scroll puedas ir viendo el comportamiento de estos elementos ó cajas, en función del valor de position que tengan.
Pensemos, en la visualización, de los documentos web, tridimensionalmente, donde, el eje X, es el horizontal, de izquierda a derecha ó viceversa, el eje Y, es el vertical, de arriba a abajo y el eje Z, es de adentro, hacía afuera ó al reves, osea de la pantalla del dispositivo, hacía ti ó a la inversa.
Por tanto, dependiendo de su posición (relative, absolute, fixed ó sticky), y de sus coordenadas (left, right, top y bottom), puede haber elementos u objetos, superpuestos, por lo que se solaparán y alguno, puede no ser visible.
Para estos casos, contamos con la propiedad z-index, que como su nombre, indica, nos sirve, para dar ordenar estas capas ó elementos superpuestos, y dar prioridad, al elemento que queremos, que quede, por encima, de los otros.
Solo obedecen a esta propiedad, los elementos posicionados, su valor por defecto, es la palabra clave auto y podemos darle un valor numerico, desde -1, que situaría el objeto en último lugar, hasta valores positivos, que cuanto, mayores seán, van situando, al objeto, más adelante. Cabe decir, que esta propiedad, es animable, osea, que podemos, jugar con ella, mediánte las propiedades transition, y animation. Abajo os dejo, una pequeña aplicación, para que jugando con ella, se entienda mejor, la propiedad z-index.
Cabe mencionar que gracias a los modulos de CSS flexbox y grid se hace menos necesaria para maquetar la propiedad: position;, pero siempre nos será útil conocerla y dominarla para posicionar algunos elementos en las páginas.
Por ejemplo la position: fixed; se usa mucho en maquetación web para fijar secciones de la página, como la cabecera ó <header> ó menus de navegación que quieres que siempre esten visibles.
El valor sticky ó pegajoso, es la última incorporación a la propiedad position y es un hibrido de las posiciones relativa y fija, el elemento se comportará como en position relative, hasta que haciendo scroll en la página, llegemos al top de su contenedor, y pasa a position fixed.
Lo dicho, es vital saber utilizar y cual es el comportamiento de la propiedad position de CSS, para ubicar, en las páginas web, todos los objetos o elementos que junto con la propiedad display, te servirán para hacer, páginas web, a tu gusto.
Sin más, me despido, gracias por leer, si tienes algún comentario ó sugerencia, agradecería vuestro contacto y lo que siempre digo, si algo te ha gustado ó llamado la atención, usa la herramienta dev tools, del navegador, para exáminar la página ó click derecho y ver código fuente, así es como yo he aprendido, hasta la vista.
