position
Controla cómo se coloca un elemento respecto al flujo normal de la página. Junto a top, right, bottom, left y z-index permite superponer elementos o fijarlos en pantalla.
- static (predeterminado): el elemento sigue el flujo normal e ignora top, right, bottom, left y z-index.
- relative: conserva su hueco en el flujo y se desplaza respecto a su posición original.
- absolute: sale del flujo y se coloca respecto al ancestro posicionado más cercano.
- fixed: sale del flujo y se coloca respecto a la ventana gráfica; no se mueve al hacer scroll.
- sticky: se comporta como relative hasta alcanzar el umbral indicado y entonces se queda pegado dentro de su contenedor.
- inset: atajo para escribir top, right, bottom y left en una sola propiedad.
Ejemplo
El hijo 2 tiene la clase item. Cambia position y haz scroll dentro del contenedor para ver cómo reacciona cada valor. Fíjate en que los demás hijos ocupan su hueco cuando sale del flujo.
ResultadoEn vivo
html
css