La propiedad position
La propiedad position decide cómo posicionar al elemento seleccionado en el documento y puede tener como valor una de estas palabras clave;.
position: static | relative | absolute | sticky | fixed | page | center
static
El elemento tiene una posición estática de acuerdo con el flujo normal de la página. Se encuentra posicionado en el mismo lugar donde fue creado. Este ( position:static ) es el valor por defecto de cualquier elemento HTML. Las propiedades top, right, bottom, left, y z-index no tienen efecto alguno en los elementos estáticos…
See the Pen position: static*** by Gabi (@enxaneta) on CodePen.
Elementos posicionados: Cuando decimos que un elemento está posicionado quiere decir que NO es un elemento estático. Su valor puede ser relative, absolute, sticky o fixed.
relative
El elemento está posicionado relativamente a su posición original y su posicionamiento no afecta la posición de los demás elementos. El lugar ocupado inicialmente por el elemento sigue afectando el flujo de la página. Por ejemplo si el elemento posicionado relative está flotado hacia la izquierda, el párrafo siguiente sigue envolviendo el hueco que representa la posición inicial del elemento aunque el elemento en si fue desplazado.
See the Pen relative*** by Gabi (@enxaneta) on CodePen.
Podemos utilizar las propiedades top, right, bottom, left para desplazar el elemento. También podemos utilizar la propiedad z-index para cambiar el orden de apilamiento.
absolute
El elemento posicionado absolute es sacado del flujo normal de la página y el CSS no crea un espacio especial para acomodarlo. Más bien flota por el documento. Su nueva posición es calculada relativamente a la esquina izquierda arriba del más próximo elemento padre posicionado, y si no hay uno, relativamente al body.
See the Pen position: absolute*** by Gabi (@enxaneta) on CodePen.
sticky
Podemos traducir sticky con adherente. Exactamente como los elementos que tienen position:relative, los elementos adherentes ( position: sticky ) están posicionados relativamente a su posición original. El elemento está también fijo relativamente al viewport, así que al hacer scroll el elemento queda adherido a su posición.
See the Pen position: sticky*** by Gabi (@enxaneta) on CodePen.
fixed
El elemento posicionado fixed es sacado del flujo normal de la página y el CSS no crea un espacio especial para acomodarlo. En este aspecto se parece a los elementos que tienen position:absolute. El elemento está también fijo relativamente al viewport, así que al hacer scroll el elemento queda fijo su posición. En este otro aspecto se parece a los elementos que tienen position:sticky.
See the Pen position:fixed*** by Gabi (@enxaneta) on CodePen.
Las propiedades top, right, bottom, left
Las propiedades top ( arriba ), right ( derecha ), bottom ( abajo ) y left ( izquierda ) se utilizan para posicionar elementos que no son estáticos. Estas propiedades tienen efecto solo en elementos posicionados.
Cuando decimos que un elemento está posicionado quiere decir que NO es un elemento estático. Su valor de la propiedad position puede ser relative, absolute, sticky o fixed.
Estas propiedades pueden ser utilizadas para centrar un elemento dentro de su contenedor. Para esto el elemento tiene que ser un elemento de bloque ( display:block ) con anchura ( width ) y altura ( height ) conocidas. También tiene que ser posicionado: position:absolute, y la propiedad margin tiene que ser auto ( o sea: dejamos al navegador que establezca el margen ).
Aquí viene lo interesante: si utilizamos top:0; bottom:0; right:0; left:0; el navegador se ve obligado a calcular el valor de estas propiedades igualando el valor de top y bottom; de left y right. El elemento queda centrado.
See the Pen centrado*** by Gabi (@enxaneta) on CodePen.
La propiedad z-index
La propiedad z-index controla el orden de apilamiento de un elemento posicionado ( relative, absolute, sticky o fixed ) y toma como valor la palabra clave auto (deja al navegador que decida si el elemento esta encimo o debajo de otro) o un número entero.
El nombre de la propiedad sugiere que se trata del eje z de un sistema de coordenadas 3D.
En CSS el eje x va de izquierda a derecha; el eje y va de arriba hacia abajo y el eje z va desde atrás hacia delante, desde el ordenador hacia el observador. La propiedad z-index representa el orden de posicionamiento del elemento seleccionado a lo largo del eje z. Como más grande el valor de la propiedad z-index más cerca del observador está el elemento.
En la siguiente demostración puede cambiar el valor de la propiedad z-index de los elementos div. Pruébela: