Static, relative y absolute

position tiene cinco valores. Los primeros tres:

1. EstáticostaticEl valor por defecto. La caja sigue el flujo y top, right, bottom y left no tienen efecto.
2. RelativarelativeLa caja se corre desde su propio lugar, pero ese lugar queda reservado. Las vecinas no se mueven.
3. AbsolutaabsoluteLa caja sale del flujo, las vecinas ocupan su lugar y los desplazamientos se miden contra su bloque contenedor (containing block).

El bloque contenedor de una caja absoluta es el ancestro posicionado más cercano: el primero con un position distinto de static (un transform también cuenta). Se mide desde el borde interno de ese ancestro, donde empieza el relleno. Si no hay ninguno, la caja se mide contra el bloque contenedor inicial: un rectángulo del tamaño de la ventana, al principio de la página.

Elegí un valor, mové top y left y destildá el ticket para ver contra qué se mide el sello. El contorno naranja marca la caja desde la que se miden top y left, y el punteado gris, el lugar del sello en el flujo.

.ticket {
  position: relative;
}

.sello {
  position: absolute;
  top: 16px;
  left: 16px;
}

<div class="relative">
  …
  <div class="absolute top-4 left-4">Pagado</div>
  …
</div>

Fixed y sticky

fixed funciona como absolute, pero se mide contra la ventana: la caja queda quieta cuando la página scrollea. Por eso no está en la demo, se iría de ella. Ojo: si un ancestro tiene transform, filter o perspective, la caja se mide contra ese ancestro y deja de quedar fija en la ventana.

sticky es un híbrido: la caja ocupa su lugar como relative hasta que el scroll la lleva al umbral que le diste, y ahí se pega. Para que funcione:

1. Un umbraltop: 0Necesita un desplazamiento, como top: 0. Sin ninguno, nunca se pega.
2. Su contenedor de scrolloverflowSe pega dentro de su contenedor de scroll más cercano. Un ancestro con overflow: hidden también es uno, aunque no scrollee, así que la caja deja de pegarse al scroll de la página. Si solo necesitás recortar, overflow: clip no crea uno.
3. Su padrelímiteNo sale de su padre: cuando el padre termina, se va con él.

inset es el atajo de top, right, bottom y left, en el mismo orden que padding:

1.capa {
2  position: absolute;
3  inset: 0; /* los cuatro en 0: cubre el bloque contenedor */
4}
5
6.encabezado {
7  position: sticky;
8  top: 0;
9}

Capas y z-index

Cuando dos cajas se superponen, las posicionadas se pintan encima de las que no lo están, y entre ellas gana la que viene después en el HTML. z-index cambia ese orden: el número más alto queda adelante. Solo funciona en cajas posicionadas (cualquier valor menos static) y en hijos de flex o grid.

Los números no compiten en toda la página, sino dentro de un contexto de apilamiento (stacking context). Cada contexto se pinta como un bloque: nada de adentro puede quedar encima de lo que tapa al contexto entero, aunque tenga z-index: 9999.

Crean un contexto, entre otros:

1. Con z-indexposition + z-indexUna caja posicionada con z-index distinto de auto (fixed y sticky crean uno siempre).
2. Efectosopacity · transformopacity menor a 1 y un transform distinto de none.
3. A propósitoisolation: isolateExiste solo para eso: crear un contexto sin cambiar nada más.

1.tarjeta {
2  position: relative;
3  isolation: isolate; /* contexto propio */
4}
5
6.tarjeta .fondo {
7  position: absolute;
8  inset: 0;
9  z-index: -1; /* detrás del contenido, pero dentro de la tarjeta */
10}

En Tailwind

En Tailwind cada valor de position es una clase con el mismo nombre. Los desplazamientos usan la escala de espaciado, que avanza de a 4px (--spacing vale 0.25rem): top-4 son 16px y left-6 son 24px.

1<!-- insignia en la esquina de la tarjeta -->
2<div class="relative">
3  <img src="foto.jpg" alt="…" />
4  <span class="absolute top-2 right-2 z-10">Nuevo</span>
5</div>
6
7<!-- encabezado que se pega al hacer scroll -->
8<header class="sticky top-0 z-10">…</header>