Fixed Position
Posición corregida
La posición fija en CSS coloca un cuadro relativo a un contenedor fijo, generalmente la ventana del navegador. El cuadro normalmente permanece en su lugar mientras el documento se desplaza.
Otro ejemplo
Un control de emergencia que se puede descartar se mantiene dentro del área segura de la pantalla del teléfono. Permanece accesible mientras se desplaza sin cubrir el contenido enfocado ni el teclado en pantalla. Un padre transformado puede cambiar a qué caja está fijado.
Partes principales
- 01bloque contenedor corregido
- 02inserción del viewport
- 03gestión de superposición
Úsalo cuando
Usa este término con moderación para controles a nivel de ventana o superficies que realmente deben mantenerse en un solo lugar.
No lo uses cuando
No uses UI fija que oculta contenido, hace que áreas sean inalcanzables o que debería moverse con su sección.
Nombre usado en código
position: fixed; inset: … Antes de lanzarlo
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Posición corregida (Fixed Position). User context: Un control de emergencia que se puede descartar se mantiene dentro del área segura de la pantalla del teléfono. Permanece accesible mientras se desplaza sin cubrir el contenido enfocado ni el teclado en pantalla. Un padre transformado puede cambiar a qué caja está fijado. Design concept to apply: Posición corregida (Fixed Position). Why it fits: Usa este término con moderación para controles a nivel de ventana o superficies que realmente deben mantenerse en un solo lugar. Do not use it when: No uses UI fija que oculta contenido, hace que áreas sean inalcanzables o que debería moverse con su sección. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Un documento formal aún puede ser un borrador, un release candidate o una versión final. Revisa su estado y la compatibilidad con tu navegador o plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how Posición corregida (Fixed Position) is used now. Definition: La posición fija en CSS coloca un cuadro relativo a un contenedor fijo, generalmente la ventana del navegador. El cuadro normalmente permanece en su lugar mientras el documento se desplaza. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.