static
(por defecto) no obedece a los estilos top, left, bottom, right.
relative
Permite posicionar un elemento respecto de la posición dónde debería ir. Será posible utilizar los estilos top, left, bottom y right.
absolute
fixed
inherit
El elemento hereda sus estilos de la capa que lo envuelve.
sticky
Es similar al fixed, pero con la diferencia de que al aplicar el estilo, el elemento no cae fuera de la línea de flotación. Además, podemos separar el elemento del límite superior de la pantalla y cuando hagamos scroll el elemento queda fijado (ver ejemplo).
Ejercicio position absolute
Tener en cuenta que al redimensionar verticalmente la pantalla, cambia el tamaño de las capas. Para esto, las capas deben tener una altura en porcentajes.
Las cinco capas que se superponen entre sí al hacer hover tendrán “position:absolute”. Además, deberán estar dentro de una capa con “position:relative” para que al aplicarles los estilos “top,left,bottom y right” no se posicionen respecto de los límites de la pantalla, sino respecto de los límites de la capa que las envuelve.
La altura de la capa que contiene las cinco capas con “position:absolute” será del 50% de la pantalla.