Containing Block
Bloque contenedor
Un bloque contenedor es el rectángulo que un elemento usa para calcular su posición y tamaño porcentual.
Otro ejemplo
Coloca una insignia de venta a 8px desde el inicio de su bloque y 8px desde el final de su línea. Establecer `position: relative` en la tarjeta hace que sea el bloque contenedor correcto. Un ancestro del carrusel transformado ya no puede mover la insignia a una esquina lejana.
Partes principales
- 01Estableciendo ancestro
- 02Rectángulo de referencia
- 03sangría o porcentaje resuelto
Úsalo cuando
Encuentra el bloque contenedor real antes de corregir tamaños en porcentaje, posiciones absolutas o sticky, o padres transformados.
No lo uses cuando
No asumas que siempre es el padre DOM más cercano o la ventana gráfica. Las reglas de posición y contención pueden cambiarlo.
Nombre usado en código
positioning scheme + containing-block-establishing ancestor 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 Bloque contenedor (Containing Block). User context: Coloca una insignia de venta a 8px desde el inicio de su bloque y 8px desde el final de su línea. Establecer `position: relative` en la tarjeta hace que sea el bloque contenedor correcto. Un ancestro del carrusel transformado ya no puede mover la insignia a una esquina lejana. Design concept to apply: Bloque contenedor (Containing Block). Why it fits: Encuentra el bloque contenedor real antes de corregir tamaños en porcentaje, posiciones absolutas o sticky, o padres transformados. Do not use it when: No asumas que siempre es el padre DOM más cercano o la ventana gráfica. Las reglas de posición y contención pueden cambiarlo. 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 Bloque contenedor (Containing Block) is used now. Definition: Un bloque contenedor es el rectángulo que un elemento usa para calcular su posición y tamaño porcentual. 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.