CSS
Explica position static, relative, absolute, fixed y sticky, junto con los containing blocks que determinan offsets y referencias de posicionamiento.
define cómo se ubica una caja y qué referencia utilizan sus inset properties.
position.badge {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
}.element { position: static; }Participa en normal flow. Insets no la desplazan.
.card {
position: relative;
inset-inline-start: 0.5rem;
}Conserva su espacio original y se desplaza visualmente. También suele establecer containing block para descendientes absolute.
.card {
position: relative;
}
.card__badge {
position: absolute;
inset: 0.5rem 0.5rem auto auto;
}Sale del normal flow y se posiciona respecto a su containing block.
No uses absolute para layout principal con contenido variable.
.help-button {
position: fixed;
inset-block-end: 1rem;
inset-inline-end: 1rem;
}Normalmente se referencia al viewport. Transforms, filters y ciertas containment properties en ancestors pueden crear otro containing block.
.header {
position: sticky;
inset-block-start: 0;
}Se comporta en flow hasta alcanzar el umbral y luego queda limitado por su scroll container y containing block.
Necesita un inset aplicable y espacio donde desplazarse.
La referencia depende del tipo de position y de ancestors con propiedades como:
Por eso un overlay puede cambiar de referencia al añadir transform a un padre.
.modal {
position: fixed;
inset: 0;
}inset resume top/right/bottom/left. Las versiones lógicas responden al writing mode.
Con width auto y ambos insets definidos, una absolute box puede estirarse.
.popover {
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
}Funciona visualmente, pero Dialog/Popover y layout normal suelen ofrecer mejores contratos para UI completa.
CSS Anchor Positioning permite ubicar elementos respecto a otro anchor:
.trigger {
anchor-name: --trigger;
}
.tooltip {
position: absolute;
position-anchor: --trigger;
position-area: block-end;
}Gran parte del módulo alcanzó Baseline 2026, pero algunas piezas mantienen soporte desigual. Usa @supports, prueba fallbacks y no elimines lógica de colisión necesaria hasta confirmar el público objetivo.
.tooltip {
position-try-fallbacks: flip-block, flip-inline;
}Permite alternativas cuando el elemento desborda. El contrato exacto y soporte deben verificarse en la versión objetivo.
¿Por qué un fixed element puede dejar de estar fijado al viewport al transformar un ancestor?
Porque ese ancestor puede establecer un containing block para descendientes fixed.
Z-index y stacking contexts explica por qué una caja aparece delante de otra.