Utilidades · Posicionamiento

Position (flujo y anclaje)

Controla cómo participa un elemento en el flujo, define referencias para hijos absolutos y aplica presets fixed o sticky sin mezclar el orden de capas.

v2.0

Cinco modos

Static, relative, absolute, fixed y sticky cubren la propiedad CSS sin introducir nombres alternativos.

Diez presets

Seis anclajes fixed y cuatro sticky combinan posición y offset en una sola utilidad.

Siete límites

Las variantes con breakpoint desactivan el posicionamiento en ese ancho y tamaños menores.

Código + resultado

Observa cada contexto de posicionamiento

Cada pestaña contiene el mismo HTML que produce el resultado aplicado.

<div class="position-relative doc-position-canvas">
  <div class="position-absolute doc-position-float"
       style="top: 16px; right: 16px;">
    Elemento
  </div>
  <span>Contenedor relativo</span>
</div>

Elemento

Contenedor relativo

El padre relativo crea la referencia; el hijo absoluto sale del flujo y usa los offsets indicados.

<div class="doc-position-viewport">
  <header class="position-fixed-t doc-position-bar">
    Barra fija
  </header>
  <span>Viewport simulado</span>
</div>

Barra fija

Viewport simulado

.position-fixed-t fija arriba y establece left: 0 y right: 0.

<div class="doc-position-viewport">
  <button class="position-fixed-rb doc-position-action"
          type="button">
    Acción
  </button>
  <span>Viewport simulado</span>
</div>

Viewport simulado

.position-fixed-rb combina position: fixed, right: 0 y bottom: 0.

<section class="overflow-auto doc-position-scroll">
  <header class="position-sticky-t">Título persistente</header>
  <p>Contenido 01</p>
  <p>Contenido 02</p>
  <p>Contenido 03</p>
  <p>Contenido 04</p>
  <p>Contenido 05</p>
</section>

Título persistente

Contenido 01

Contenido 02

Contenido 03

Contenido 04

Contenido 05

.position-sticky-t conserva el elemento arriba mientras se desplaza su contenedor.

Propiedad base

Cinco formas de participar en el flujo

Estas clases sólo modifican position; no agregan offsets ni valores de z-index.

.position-staticstatic

Participa en el flujo normal e ignora offsets.

.position-relativerelative

Conserva su espacio y sirve de referencia para hijos absolutos.

.position-absoluteabsolute

Sale del flujo y se posiciona respecto del ancestro adecuado.

.position-fixedfixed

Se fija respecto de la ventana visible.

.position-stickysticky

Alterna entre flujo normal y anclaje durante el desplazamiento.

Anclajes compuestos

Presets fixed y sticky

Los sufijos usan t, r, b y l para top, right, bottom y left.

Fixed · relativo al viewport

.position-fixed-tArriba, ancho completo.

.position-fixed-bAbajo, ancho completo.

.position-fixed-ltEsquina superior izquierda.

.position-fixed-rtEsquina superior derecha.

.position-fixed-lbEsquina inferior izquierda.

.position-fixed-rbEsquina inferior derecha.

Sticky · relativo al área de scroll

.position-sticky-tAnclaje superior.

.position-sticky-bAnclaje inferior.

.position-sticky-lAnclaje izquierdo.

.position-sticky-rAnclaje derecho.

Desactivación responsive

Siete límites máximos

Una clase con sufijo revierte a position: static y limpia los cuatro offsets cuando la ventana es igual o menor al valor indicado.

640max-width.position-fixed-t-640

768max-width.position-fixed-t-768

1280max-width.position-fixed-t-1280

1536max-width.position-fixed-t-1536

2560max-width.position-fixed-t-2560

3840max-width.position-fixed-t-3840

6016max-width.position-fixed-t-6016

HTML

<header class="position-fixed-t position-fixed-t-768">
  Barra fija sólo sobre 768px
</header>

Sobre 768px actúa .position-fixed-t. En 768px o menos, .position-fixed-t-768 la devuelve al flujo normal y limpia sus offsets.

ImportanteEstas variantes no activan el posicionamiento desde un breakpoint; lo desactivan hacia abajo y deben combinarse con la clase base correspondiente.

Referencia

Clases disponibles

La tabla contiene únicamente las familias presentes en el módulo actual.

Clases	Propiedades	Función	Ejemplo
`.position-static`	`position: static`	Mantiene el elemento en el flujo normal; los offsets no producen desplazamiento.	`.position-static`
`.position-relative`	`position: relative`	Conserva su espacio original, admite offsets y sirve como referencia para descendientes absolutos.	`.position-relative`
`.position-absolute`	`position: absolute`	Saca el elemento del flujo y lo posiciona respecto del ancestro posicionado más cercano.	`.position-absolute`
`.position-fixed`	`position: fixed`	Saca el elemento del flujo y lo mantiene fijo respecto de la ventana visible.	`.position-fixed`
`.position-sticky`	`position: sticky`	Permanece en el flujo hasta alcanzar un offset dentro de su área de desplazamiento.	`.position-sticky`
`.position-fixed-t`	`fixed; top: 0; left: 0; right: 0`	Fija una barra arriba y la extiende a todo el ancho disponible.	`.position-fixed-t`
`.position-fixed-b`	`fixed; bottom: 0; left: 0; right: 0`	Fija una barra abajo y la extiende a todo el ancho disponible.	`.position-fixed-b`
`.position-fixed-lt`	`fixed; left: 0; top: 0`	Fija el elemento en la esquina superior izquierda.	`.position-fixed-lt`
`.position-fixed-rt`	`fixed; right: 0; top: 0`	Fija el elemento en la esquina superior derecha.	`.position-fixed-rt`
`.position-fixed-lb`	`fixed; left: 0; bottom: 0`	Fija el elemento en la esquina inferior izquierda.	`.position-fixed-lb`
`.position-fixed-rb`	`fixed; right: 0; bottom: 0`	Fija el elemento en la esquina inferior derecha.	`.position-fixed-rb`
`.position-sticky-t`	`sticky; top: 0`	Mantiene el elemento adherido al borde superior durante el desplazamiento.	`.position-sticky-t`
`.position-sticky-r`	`sticky; right: 0`	Mantiene el elemento adherido al borde derecho durante el desplazamiento horizontal.	`.position-sticky-r`
`.position-sticky-b`	`sticky; bottom: 0`	Mantiene el elemento adherido al borde inferior durante el desplazamiento.	`.position-sticky-b`
`.position-sticky-l`	`sticky; left: 0`	Mantiene el elemento adherido al borde izquierdo durante el desplazamiento horizontal.	`.position-sticky-l`
`.position-{tipo}-{bp}`	static + offsets auto	Desactiva el modo base en el límite indicado.	`.position-fixed-768`
`.position-fixed-{lado}-{bp}`	static + offsets auto	Desactiva un preset fixed en el límite indicado.	`.position-fixed-rb-768`
`.position-sticky-{lado}-{bp}`	static + offsets auto	Desactiva un preset sticky en el límite indicado.	`.position-sticky-t-768`

Recomendaciones

Buenas prácticas de position

Define la referencia

Usa .position-relative en el padre que debe contener a un hijo absoluto.

Prefiere presets

Para barras y acciones flotantes usa una clase compuesta antes de repetir offsets.

Sticky necesita scroll

Comprueba el overflow y la altura de sus ancestros cuando el anclaje no responda.

Separa las capas

Combina con .z-* sólo cuando exista una superposición que ordenar.