Etiqueta "position" y tipos de "position"
En la clase de hoy vamos a empezar a ver la etiqueta "position", con una serie de tipos de posiciones: "static, relative, absolute, fixed, sticky o inherit". Además está relacionado con las propiedades "top, bottom , left, right y z-index". El "z-index" se usa para establecer un orden a la hora de crear capas, para posicionar elementos uno delante de otro cuando se solapan,
El "static" es el valor por defecto, sigue el flujo y no se aplica el uso de "top, bottom, z-index, etc".
El "relative" es similar al static, pero este si que se ve afectado por "top, z-index, left, etc".
El "fixed" se le aplican las propiedades anteriores relativos al documento, pero no atiende a scroll, se queda fijo en el mismo sitio.
El "absolute" se comporta como el fixed pero relativo a la primera etiqueta que tenga "position: relative".
El "sticky" se comporta como "relative" hasta que llega a una posición de scroll, después pasa a comportarse como "fixed".
El "inherit" hace que "position" pueda propagarse en cascada, siempre que se añada el "inherit" a los elementos hijo que queramos que lo hereden.
A continuación hemos visualizado en un navegador un ejercicio de ejemplo sobre "position", mediante la herramienta inspectora hemos visto las propiedades y como se comportan los elementos en el navegador al desactivar o activar los tipos de "position" incluidos en el ejercicio práctico.
No hay comentarios:
Publicar un comentario