Fixed, Sticky y z-index

position: fixed: relativo al viewport, permanece al scrollear

position: fixed también saca el elemento del flujo normal, pero su referencia no es un ancestro del DOM sino el viewport (la ventana del navegador).

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* la barra queda fija en la parte superior, incluso al scrollear */
}

La característica distintiva: el elemento no se mueve al hacer scroll. Permanece en el mismo lugar de la pantalla aunque el usuario baje por la página.

Casos de uso: barra de navegación siempre visible, botón “volver arriba”, banner de cookies, chat flotante.

Detalle de implementación: cuando usás position: fixed en una navbar, el contenido de la página queda “debajo” de ella. Hay que compensarlo con margin-top en el contenedor principal (en el ejemplo, .contenido { margin-top: 50px }).

Límite del validador: el efecto de “permanecer al scrollear” no es validable en la corrección — no hay scroll real. El validador comprueba que position: fixed, top: 0px y left: 0px estén declarados. Observá el efecto scrolleando en el preview.

position: sticky: el híbrido relative/fixed con umbral de scroll

position: sticky es el valor más complejo: se comporta como relative mientras el elemento no llega a un umbral de scroll, y en ese punto se “pega” como si fuera fixed — hasta que su propio contenedor sale de la pantalla.

.seccion-titulo {
  position: sticky;
  top: 0; /* se pega al borde superior cuando llega ahí al scrollear */
}

Los tres requisitos de sticky (deben cumplirse los tres):

1. Un offset declarado. top, bottom, left o right con un valor distinto de auto. Sin él, sticky actúa como relative y nunca se pega.
2. Un ancestro con mecanismo de scroll. El sticky se activa scrolleando dentro del ancestro que tiene overflow: scroll, auto o hidden. Si no hay ancestro con overflow, sticky puede no funcionar.
3. El elemento deja de pegarse en el borde de su propio contenedor. El sticky solo se pega dentro de los límites de su padre. Cuando el padre sale de la pantalla, el sticky lo sigue.

Caso de uso típico: encabezados de sección que se pegan mientras el usuario scrollea por esa sección.

Límite del validador: el efecto de sticky (que el elemento se pegue al umbral) no es validable en la corrección. Se valida la declaración (position: sticky + top: 0px). Observá el comportamiento scrolleando en el preview — si el preview es muy corto, probalo con más contenido o en pantalla completa.

z-index y el orden de apilado

z-index controla qué elemento queda “encima” cuando dos se superponen. Solo funciona en elementos posicionados (position ≠ static). En un elemento static, z-index no tiene efecto de apilado aunque el computed devuelva el valor — por eso siempre va acompañado de un position.

.card {
  position: relative;
  z-index: 1;   /* capa 1 */
}
.modal {
  position: fixed;
  z-index: 100; /* encima de .card */
}

Valores: enteros positivos (más arriba), 0 (nivel base entre posicionados), enteros negativos (pueden quedar debajo del flujo normal), auto (default — no crea contexto de apilado propio).

El contexto de apilado: los z-index no son globales — son relativos al contexto de apilado al que pertenece el elemento. Un elemento con z-index: 9999 dentro de un contenedor con z-index: 1 nunca va a quedar encima de un elemento hermano con z-index: 2. El orden se compara dentro del mismo contexto.

.contenedor { position: relative; z-index: 1; }  /* crea su propio contexto */
.hijo       { position: relative; z-index: 9999; } /* solo gana dentro de .contenedor */
.rival      { position: relative; z-index: 2; }   /* gana a .contenedor → gana a todo lo de adentro */

Límite del validador: que un elemento quede visualmente “encima” de otro no es validable — es un efecto de composición. El validador comprueba que position: relative y z-index: 10 estén declarados en .panel.

---

Tu turno: en el sandbox, aplicá el posicionamiento a .navbar, .seccion-titulo y .panel según las instrucciones del enunciado. Scrolleá el preview para ver los efectos de fixed y sticky.