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.

Selecciona position:
ResultadoEn vivo
html
css