# Position (flujo y anclaje) > Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/position.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Posicionamiento 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 5 ## 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. i ## Position y z-index se componen Este módulo decide dónde participa el elemento; usa `.z-*` únicamente cuando también necesites controlar qué capa queda encima. Código + resultado ## Observa cada contexto de posicionamiento Cada pestaña contiene el mismo HTML que produce el resultado aplicado. HTML ```html
Elemento
Contenedor relativo
``` Resultado aplicado Respecto del padre Elemento Contenedor relativo El padre relativo crea la referencia; el hijo absoluto sale del flujo y usa los offsets indicados. HTML ```html
Barra fija
Viewport simulado
``` Resultado aplicado Superior · ancho completo Barra fija Viewport simulado `.position-fixed-t` fija arriba y establece `left: 0` y `right: 0`. HTML ```html
Viewport simulado
``` Resultado aplicado Esquina inferior derecha Viewport simulado `.position-fixed-rb` combina `position: fixed`, `right: 0` y `bottom: 0`. HTML ```html
Título persistente

Contenido 01

Contenido 02

Contenido 03

Contenido 04

Contenido 05

``` Resultado aplicado Desplaza el panel 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-static` static Participa en el flujo normal e ignora offsets. `.position-relative` relative Conserva su espacio y sirve de referencia para hijos absolutos. `.position-absolute` absolute Sale del flujo y se posiciona respecto del ancestro adecuado. `.position-fixed` fixed Se fija respecto de la ventana visible. `.position-sticky` sticky 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-t` Arriba, ancho completo. `.position-fixed-b` Abajo, ancho completo. `.position-fixed-lt` Esquina superior izquierda. `.position-fixed-rt` Esquina superior derecha. `.position-fixed-lb` Esquina inferior izquierda. `.position-fixed-rb` Esquina inferior derecha. ### Sticky · relativo al área de scroll `.position-sticky-t` Anclaje superior. `.position-sticky-b` Anclaje inferior. `.position-sticky-l` Anclaje izquierdo. `.position-sticky-r` Anclaje 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. `640` max-width .position-fixed-t-640 `768` max-width .position-fixed-t-768 `1280` max-width .position-fixed-t-1280 `1536` max-width .position-fixed-t-1536 `2560` max-width .position-fixed-t-2560 `3840` max-width .position-fixed-t-3840 `6016` max-width .position-fixed-t-6016 HTML ```html
Barra fija sólo sobre 768px
``` Sobre 768px actúa `.position-fixed-t`. En 768px o menos, `.position-fixed-t-768` la devuelve al flujo normal y limpia sus offsets. Importante Estas 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 01 ### Define la referencia Usa `.position-relative` en el padre que debe contener a un hijo absoluto. 02 ### Prefiere presets Para barras y acciones flotantes usa una clase compuesta antes de repetir offsets. 03 ### Sticky necesita scroll Comprueba el overflow y la altura de sus ancestros cuando el anclaje no responda. 04 ### Separa las capas Combina con `.z-*` sólo cuando exista una superposición que ordenar.