Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
position: fixed y sticky controlan qué pasa al hacer scroll, y z-index decide qué elemento queda encima cuando dos se superponen.
Explicación
fixed y sticky son dos formas más de sacar (o casi sacar) un elemento del flujo normal, y z-index resuelve qué se ve encima cuando se superponen:
position: fixedEl elemento se posiciona respecto a la ventana (viewport) y no se mueve nunca al hacer scroll, sin importar cuánto contenido haya.
position: stickyCombina relative y fixed: se comporta como relative hasta que el scroll lo alcanza, y ahí se "pega" como fixed dentro de su contenedor.
z-indexNúmero que decide qué elemento queda encima cuando dos se superponen. Solo funciona en elementos con position distinto de static.
Reto rápido
Cambia bottom y right de .fixed-boton por top y left, y observa cómo el botón se mueve a la esquina opuesta.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
sticky es perfecto para encabezados de tabla o menús que deben quedarse visibles mientras el usuario lee una lista larga, sin bloquear toda la pantalla como fixed.
Dato extra
Un valor de z-index más alto no garantiza nada por sí solo si los elementos están en "contextos de apilamiento" distintos — un tema avanzado, pero para la mayoría de los casos alcanza con dar z-index solo a los elementos posicionados que realmente se superponen.
Error común
Poner z-index en un elemento con position: static (el valor por defecto): z-index no tiene ningún efecto ahí, sin importar qué tan alto sea el número.
Siguiente paso
Ya dominas position en sus cuatro variantes. Ahora toca darles personalidad con fondos y bordes.
Ir a la siguiente lección