Posicionamiento CSS

La propiedad position controla cómo se ubica un elemento. static es el valor por defecto (flujo normal). relative lo mueve respecto a su posición original sin afectar a otros. absolute lo saca del flujo y lo posiciona respecto al ancestro positioned más cercano. fixed lo fija respecto a la ventana (no se mueve al hacer scroll). sticky es un híbrido: flujo normal hasta que alcanza un punto de scroll y luego se queda fijo.

z-index controla qué elemento aparece "encima" cuando se superponen. Solo funciona en elementos con position distinto de static. Un z-index mayor significa más arriba visualmente. Los menús desplegables, modales y tooltips dependen del posicionamiento y z-index para aparecer sobre el resto del contenido.

/* STATIC (default) - flujo normal del documento */
.normal { position: static; }

/* RELATIVE - relativo a su posición original */
.relativo {
  position: relative;
  top: 10px;   /* baja 10px de su lugar */
  left: 20px;  /* se mueve 20px a la derecha */
}

/* ABSOLUTE - relativo al ancestro posicionado */
.padre { position: relative; }
.absoluto {
  position: absolute;
  top: 0;
  right: 0;   /* esquina superior derecha del padre */
}

/* FIXED - relativo al viewport (pantalla) */
.menu-fijo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100; /* encima de otros elementos */
}

/* STICKY - combination de relative y fixed */
.encabezado-sticky {
  position: sticky;
  top: 0; /* se "pega" al llegar a top: 0 */
}