Tecnología Electrónica

Propiedad CSS position: guía completa de static, relative, absolute, fixed y sticky

La propiedad CSS position controla cómo se posiciona un elemento en el diseño del documento. Existen cinco valores, cada uno sirve a necesidades de diseño distintas.

Referencia de valores

Valor Comportamiento Punto de referencia ¿En el flujo? Usos comunes
static (predeterminado) Flujo normal del documento N/A Sí Línea base; restablece el posicionamiento heredado
relative Desplazamiento desde la posición normal Él mismo Sí (se reserva el espacio) Desplazar elementos; crear contexto de posicionamiento para hijos absolutos
absolute Eliminado del flujo; posicionado Ancestro posicionado más cercano No Tooltip, menús desplegables, modales, insignias, superposiciones
fixed Eliminado del flujo; relativo al viewport Viewport No Barras de navegación, barras laterales, widgets de chat, banners de cookies
sticky Relativo hasta el umbral de desplazamiento, luego fijo Viewport (cuando está pegado) Sí (hasta que se pega) Encabezados de sección, botones "volver arriba", filtros persistentes

Conceptos clave

  • Contexto de posicionamiento: relative, absolute, fixed, sticky en un ancestro crea un bloque contenedor para descendientes absolute.
  • Propiedades de desplazamiento: top, right, bottom, left solo funcionan en elementos no estáticos.
  • Z-index: Controla el orden de apilamiento solo para elementos posicionados (no estáticos).
  • sticky requiere un umbral (por ejemplo, top: 0) y un ancestro desplazable con altura definida.

Patrones prácticos

/* Menú desplegable */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; } /* Encabezado de sección pegajoso */ .section-header { position: sticky; top: 0; background: white; z-index: 10; } /* Nav fija */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }

Elige el valor menos disruptivo que logre tu objetivo de diseño: predetermina a static/relative; recurre a absolute/fixed/sticky solo cuando sea necesario.

>

<

RFID