CSS Layout Debugging Techniques

What You Learn From This Page

• How to convert a visual CSS problem into measurable layout evidence.
• How to inspect authored declarations, computed values, and box-model dimensions.
• How to diagnose Flexbox, Grid, overflow, positioning, and stacking problems.
• How parent constraints, intrinsic sizing, and browser defaults affect children.
• How to isolate cascade conflicts, variables, calculations, and responsive rules.
• How to test zoom, long content, keyboard interaction, RTL, fonts, and dynamic states.
• How to build a minimal reproduction and fix the root cause instead of adding patches.

Introduction

CSS layout bugs can look unpredictable, but the browser is always following a set of rules. An element becomes too wide because a size, minimum, intrinsic contribution, margin, transform, or parent constraint produced that width. A menu appears behind a header because stacking contexts resolved in a specific order. A sticky sidebar stops moving because an ancestor established an unexpected scroll container.

Effective debugging replaces visual guessing with measurements. The useful questions are not simply "Why is CSS broken?" but "What size or position did I expect, what did the browser calculate, and which rule produced the difference?" Browser developer tools expose the DOM, matched declarations, computed values, box model, layout overlays, event regions, and responsive state needed to answer those questions.

A reliable workflow moves from the outside inward: reproduce the failure, select the exact element, inspect its computed styles and dimensions, identify its layout context, examine parent constraints, disable suspicious declarations, and test the smallest valid correction. This article applies that workflow to the most common real-world layout failures.

What Is CSS Layout Debugging?

CSS layout debugging is the process of finding the rule, content condition, or structural relationship responsible for an unexpected rendered result. It includes geometry problems such as overflow and alignment, visibility problems such as clipping, interaction problems such as blocked clicks, and responsive failures that appear only at particular widths.

The task is evidence-driven. Authored CSS is only one input. The cascade selects declarations, inheritance supplies some values, custom properties resolve, layout algorithms determine used sizes, and the browser paints the final result. Debugging must therefore inspect the browser's resolved output rather than relying only on the source file.

A Strong Debugging Workflow

Begin by making the problem reproducible. Record the viewport size, browser zoom, content, route, state, and interaction that trigger it. Select the failing element and write down the expected behavior in measurable terms: for example, the card should fit a 360-pixel viewport, the title should wrap to two lines, or the menu should paint above the header.

Next inspect the computed styles and box model, identify whether the element participates in normal flow, Flexbox, Grid, positioned layout, or a table formatting context, and walk through its ancestors. Disable one suspicious declaration at a time. Once the cause is known, fix the constraint or architecture and retest nearby states.

Start With Browser Developer Tools

The Elements or Inspector panel should usually be the first tool. Right-clicking the visible element and choosing Inspect opens the browser-generated DOM at the selected node. The element picker is useful when an unexpected overlay or pseudo-element occupies the same area.

Chrome and Edge commonly open DevTools with F12 or Control+Shift+I on Windows and Linux. Control+Shift+C activates element selection. Firefox provides equivalent inspection workflows. Shortcuts are useful, but the important habit is selecting the rendered node rather than searching a large stylesheet before confirming which element is actually involved.

Inspect the Browser's DOM

The browser may not create the tree exactly as the original source appears. Invalid nesting, missing closing tags, framework rendering, shadow roots, and script-driven changes can all alter the live DOM. If a sidebar unexpectedly sits inside a header, no amount of selector adjustment can fully compensate for the wrong structure.

Expand the element's ancestors and siblings. Check whether the expected wrapper exists, whether duplicate components are present, and whether a state class was applied to the correct node. Inspect pseudo-elements because generated content, decorative boxes, and absolutely positioned overlays often come from ::before or ::after.

Styles vs Computed Values

The Styles or Rules panel lists declarations that match the selected element, including overridden, inherited, invalid, and inactive rules. The Computed panel shows the properties that won after the cascade and their resolved values. Both views matter: one explains where a value came from, and the other confirms what the browser is actually using.

If the source says display: grid but Computed reports block, inspect crossed-out declarations, media conditions, selector specificity, source order, inline styles, layers, and !important. Follow links back to the source rule rather than editing an unrelated selector that happens to produce a temporary visual improvement.

Inspect the Box Model

The box-model diagram separates content, padding, border, and margin. It quickly reveals a 24-pixel padding that was assumed to be 12 pixels, a collapsed margin, a border added by a validation state, or a content width that is larger than expected.

.box {
  inline-size: 300px;
  padding: 20px;
  border: 5px solid;
}

With content-box, the border-box inline size is 350 pixels: 300 for content, 40 for horizontal padding, and 10 for borders. With border-box, the declared 300 pixels includes those parts. Measure the rendered box before assuming the width declaration is incorrect.

Verify box-sizing

Mixed box-sizing rules are a common source of off-by-padding overflow. Many projects use a consistent border-box baseline so component dimensions include padding and borders.

*,
*::before,
*::after {
  box-sizing: border-box;
}

This rule simplifies arithmetic but does not solve every width problem. Percentage margins, minimum sizes, transforms, grid gaps, and intrinsic content can still extend a box. Confirm that the rule applies to pseudo-elements as well as ordinary elements and that a component stylesheet has not overridden it.

Use Temporary Outlines and Backgrounds

Outlines reveal box boundaries without changing layout dimensions. A global debug mode can expose the child that crosses the viewport, while targeted colors distinguish parent and child areas.

.debug-layout * {
  outline: 1px solid rgb(220 38 38 / 35%);
}

.debug-parent { background: rgb(59 130 246 / 12%); }
.debug-child  { background: rgb(239 68 68 / 12%); }

Apply these rules temporarily and remove them after diagnosis. Do not use borders for the same purpose unless you account for their effect on dimensions. When outlining everything produces too much noise, start with the suspected container and expand outward one level at a time.

Check Browser Default Styles

User-agent styles give body, headings, paragraphs, lists, form controls, and other elements useful defaults. Unexpected outer space may be the body's default margin; a large heading gap may come from built-in block margins rather than the component stylesheet.

body {
  margin: 0;
}

h1,
p {
  margin-block-start: 0;
}

A reset can make defaults explicit, but aggressive resets may remove list markers, fieldset behavior, control appearance, or useful typography. Inspect the user-agent rule before removing it and reintroduce any required semantics and focus presentation.

Debug From Parent to Child

A child can obey its own rules perfectly and still look wrong because its parent supplies insufficient width, an unexpected formatting context, clipping, or alignment. Walk from viewport to page shell, container, component, and child. At each level inspect dimensions, display, position, overflow, and min/max constraints.

For overflow, also work inside out. Start with the first box extending beyond its expected edge, then move upward until finding the ancestor whose available size becomes smaller than the child's contribution. This identifies the boundary where the layout contract fails.

Inspect Display and Formatting Context

The display value determines which layout algorithm handles an element. Width has no ordinary effect on a non-replaced inline box, while the same declaration works on inline-block, block, flex, and grid items. A flex container changes how its direct children size and align; descendants deeper than one level are not flex items of that container.

.label {
  display: inline-block;
  inline-size: 12rem;
}

Before adjusting dimensions, confirm whether the element is a block, inline box, flex item, grid item, table cell, or positioned box. Many failed fixes apply a property to an element that is not participating in the expected context.

Debug Flexbox With Layout Overlays

Current browser inspectors can highlight flex containers and visualize item boundaries, free space, gaps, and alignment. Use the overlay to identify the main and cross axes before changing justify-content or align-items. In a row, the main axis is usually horizontal; in a column, it is usually vertical.

Inspect the resolved flex-grow, flex-shrink, and flex-basis values for each item. A shorthand such as flex: 1 changes all three components, so it can produce equal growth when the design intended only a flexible remainder.

Flex Items That Refuse to Shrink

Flex items use an automatic minimum size that can preserve a content-based minimum. A long title, image, code line, or nested component can therefore force the item wider than the available row even when flex-shrink is enabled.

.toolbar {
  display: flex;
}

.toolbar__main {
  flex: 1 1 auto;
  min-inline-size: 0;
}

Use min-inline-size: 0, or physical min-width: 0, on the item that must shrink. In a column layout, min-block-size: 0 may be required for a child scroll region to fit within a fixed-height application shell.

Unexpected Flex Shrinking and Growth

A sidebar with width: 300px can become narrower because flex items initially allow shrinking. If the sidebar must remain fixed, represent that constraint through flex sizing.

.sidebar {
  flex: 0 0 300px;
}

.main {
  flex: 1 1 auto;
  min-inline-size: 0;
}

Conversely, flex: 1 may make an item grow when only its natural width was intended. Use the overlay and resolved sizes to determine whether free space distribution, shrinkage, a minimum size, or margins caused the final geometry.

Flex Wrapping and Spacing

A toolbar may overflow because the container remains single-line. If multiple rows are acceptable, enable wrapping and define gaps at the container level.

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

Check whether item margins duplicate the gap. A 20-pixel gap plus 20-pixel margins can create much more space than expected and make wrapping occur early. Prefer one spacing system for a component, while preserving margins only where their independent behavior is intentional.

Debug Grid With Track Overlays

Grid overlays identify explicit and implicit tracks, line numbers, gaps, and named areas. They make it clear when an item was auto-placed into an implicit column, when a spanning item enlarged a track, or when a gap was mistaken for padding.

Inspect the grid container's template and each item's start, end, span, and alignment. If an item appears in the wrong cell, confirm both the DOM order and placement declarations. If the track is the wrong size, inspect every item contributing intrinsic size to it rather than changing only the visibly largest child.

Why 1fr Can Overflow

Outside minmax(), a flexible grid track has an automatic minimum. Long content can preserve a large min-content contribution and push the grid beyond its container. Setting an explicit zero minimum allows the track to shrink before its flexible maximum is resolved.

.two-column-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

Use this correction when the items have an appropriate internal wrapping, clipping, or scrolling strategy. A zero track minimum is not automatically desirable when the content must retain a minimum readable width.

Responsive Grid Without Excess Breakpoints

Before adding another media query, determine whether the grid can adapt through intrinsic track sizing. A card collection can often wrap naturally with auto-fit and minmax().

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}

The nested min() prevents the minimum from exceeding a very narrow container. Test the exact content and target browsers; a formula should express a real minimum rather than conceal poorly sized child components.

Debug Margins, Gaps, and Collapsing

Adjacent vertical margins in normal block flow can collapse instead of adding together. A 20-pixel bottom margin followed by a 30-pixel top margin may create a 30-pixel separation. Parent and first-child margins can also interact in ways that make spacing appear outside the expected box.

Use container padding, display: flow-root, or Flexbox/Grid gap when those mechanisms match the design. Do not add arbitrary offsets until the box-model view confirms whether the space is margin, padding, gap, track distribution, or an empty line-height area.

Debug Horizontal Overflow

Common causes include fixed widths, large intrinsic images, 100vw, negative margins, transforms, long unbreakable strings, no-wrap text, minimum widths, and content-box padding. Keep the page scrollbar visible during diagnosis because globally hiding it removes useful evidence.

img,
video,
svg {
  max-inline-size: 100%;
  block-size: auto;
}

.user-content {
  overflow-wrap: anywhere;
}

If an element should fill its parent, inline-size: 100% is often safer than 100vw, which can include scrollbar space. Use the browser's overflow indicators or compare scroll dimensions when the offender is difficult to see.

Measure Overflow With JavaScript

When visual inspection is inconclusive, DOM measurements can confirm which axis overflows. The scroll dimensions represent the full scrollable area, while client dimensions represent the inner visible area.

const hasHorizontalOverflow =
  element.scrollWidth > element.clientWidth;

const hasVerticalOverflow =
  element.scrollHeight > element.clientHeight;

These comparisons identify overflow but not its cause. Continue by inspecting descendants, pseudo-elements, transforms, and intrinsic sizes. Remember that subpixel rounding can produce tiny differences, so interpret measurements with the actual visible behavior.

Debug Clipping and Missing Content

If content disappears, inspect display, visibility, opacity, color, position, dimensions, and every ancestor's overflow. A child menu with a huge z-index still cannot escape an ancestor's overflow clip.

Differentiate hidden from clip: hidden creates a scroll container, while clip does not. That distinction can change sticky behavior and programmatic scrolling. If rounded media requires clipping but a dropdown must extend outside, separate the media mask from the overlay's containing structure.

Debug Absolute Positioning

An absolutely positioned element is placed relative to its containing block, not automatically relative to its closest visual card. If a badge appears in a page corner, inspect which ancestor establishes the containing block.

.card {
  position: relative;
}

.card__badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
}

Check all inset values and confirm the intended anchoring element. Avoid using absolute positioning for ordinary document spacing because removed-from-flow boxes do not reserve room for neighboring content.

Relative and Transformed Movement

Relative positioning and transforms move the painted box while preserving its original layout space. This can create an apparent empty gap at the old position and overlap at the new one. The surrounding layout does not reflow around the visual translation.

Temporarily disable top, left, logical inset properties, and transforms to reveal the base geometry. If the element simply needs spacing, use margin, padding, gap, alignment, or a suitable layout model instead of visual displacement.

Fixed and Sticky Elements

A fixed header is removed from normal flow and can cover the beginning of the document. The page must intentionally reserve space or use a sticky design where appropriate. Keep the header height responsive because text wrapping and user font settings can make a hard-coded offset inaccurate.

When sticky fails, verify that an inset such as top is set, identify the nearest scroll container, inspect ancestor overflow, confirm that the containing block has enough travel distance, and check flex/grid stretching. Sticky cannot move if its available region is no larger than itself.

Debug Stacking Contexts

Z-index comparisons occur within stacking contexts. A child with z-index 9999 can remain below a sibling whose parent stacking context is above the child's entire parent. Position and z-index, transforms, opacity below one, filters, isolation, containment, and several other features can establish contexts.

.header {
  position: relative;
  z-index: 10;
}

.nav {
  position: relative;
  z-index: 1;
}

A dropdown inside nav cannot outrank the header merely by increasing its own number if it remains trapped in the lower nav context. Inspect the ancestor hierarchy and fix the context ordering or move the overlay to an appropriate top-layer architecture.

Element Visible but Not Clickable

An invisible or transparent overlay can intercept pointer input. Use the element picker at the problem coordinate to discover the topmost hit-tested node. Inspect full-screen fixed elements, pseudo-elements, opacity, visibility, and pointer-events.

.overlay[hidden] {
  display: none;
}

.decorative-layer {
  pointer-events: none;
}

Do not apply pointer-events none to interactive content as a general fix. Correct the hidden state, dimensions, stacking, or event design of the overlay that should not be intercepting input.

Disable Rules to Isolate the Cause

Developer tools allow individual declarations to be toggled without editing source files. Disable width, minimum size, transform, margin, overflow, position, and alignment declarations one at a time. When the failure disappears, restore the declaration and determine why it conflicts with the intended layout.

For a large stylesheet, use binary search: disable approximately half the relevant rules, observe whether the issue remains, and continue with the half that contains the cause. This is faster and more reliable than accumulating experimental overrides.

Reduce to a Minimal Reproduction

A minimal reproduction contains only the markup, styles, content, and state necessary to show the failure. Remove application scripts, unrelated wrappers, themes, and component variants gradually while preserving the bug. The remaining code usually exposes the actual layout relationship.

<div class="parent">
  <div class="child">Long test content</div>
</div>

If the issue disappears during reduction, the last removed dependency is evidence. Minimal cases also make browser inconsistencies easier to verify and team discussions more precise.

Use a Known Baseline Carefully

For a confusing component, temporarily return the selected element to ordinary flow and reintroduce constraints one at a time.

.diagnostic-baseline {
  display: block;
  position: static;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  padding: 0;
  transform: none;
}

This is a diagnostic experiment, not a production reset. It helps identify whether position, sizing, spacing, or transform introduces the failure. Preserve semantic browser behavior and avoid applying a blanket reset across the whole page.

Debug the Cascade

When an expected declaration loses, inspect selector specificity, source order, cascade layers, importance, inline styles, and active conditions. Crossed-out rules explain that a declaration matched but did not win; an absent rule may indicate the selector did not match or its stylesheet failed to load.

Fix the ownership problem rather than escalating with a stronger selector or !important. Repeated specificity escalation makes future debugging harder because each correction must defeat the previous one.

Inspect Custom Properties and calc()

A component may derive its dimensions through several custom properties and calculations. Follow each var() reference to the declaration, check scope and inheritance, and confirm fallback behavior.

.sidebar {
  inline-size: var(--sidebar-size, 16rem);
}

.main {
  inline-size: calc(100% - var(--sidebar-size, 16rem));
}

Temporarily replace a complex calculation with a simple known value. If the geometry becomes correct, evaluate each term, unit, gap, padding, and box-sizing assumption. Often Flexbox or Grid can express the relationship more directly than manual subtraction.

Debug Responsive Rules

Use responsive mode and slowly resize through the entire range rather than checking only preset devices. Find the first width at which the layout fails and inspect which media or container queries become active there. A one-pixel transition can reveal a conflicting rule or a component whose intrinsic minimum exceeds the available space.

Do not add a breakpoint automatically. Ask whether fixed dimensions, nowrap, a minimum width, missing flex wrapping, or an intrinsic grid track is the real cause. Breakpoints should represent meaningful structural transitions, not patch every isolated content collision.

Fixed and Minimum Dimensions

Fixed heights commonly clip translated text, validation errors, and long descriptions. A minimum height preserves a baseline while allowing growth; natural height is better when no stable viewport is required. Similarly, a fixed 700-pixel modal should be constrained by available width.

.modal {
  inline-size: min(44rem, calc(100% - 2rem));
  max-block-size: calc(100dvh - 2rem);
  overflow-y: auto;
}

Inspect preferred, minimum, and maximum sizes together. A max-width can prevent expected growth, while a min-width can prevent shrinking even when width is auto.

Intrinsic Content and Replaced Elements

Images, videos, tables, form controls, and long text have intrinsic sizing contributions. They can enlarge an auto-sized track or prevent a flex item from shrinking without any obvious fixed width. Inspect the element's natural dimensions and the min-content size of its content.

Use responsive media constraints, wrapping opportunities, and local table scroll wrappers where appropriate. Do not crop or truncate essential information solely to satisfy a card design; first determine whether the component should grow or change structure.

Debug Tables and Form Controls

A data table can be wider than the viewport because preserving column relationships requires space. Put it in a local horizontal wrapper rather than forcing the entire page to scroll. Inspect table-layout, cell white-space, minimum widths, and unbreakable values.

.table-wrapper {
  max-inline-size: 100%;
  overflow-x: auto;
}

input,
select,
textarea,
button {
  box-sizing: border-box;
  font: inherit;
}

Form controls retain browser-specific intrinsic behavior and appearance. Test actual controls instead of styling a generic div and assuming the dimensions will match.

White Space and Ellipsis Failures

A single white-space: nowrap declaration can force a wide label beyond its container. For single-line ellipsis, the text needs a constrained inline size, clipped overflow, no wrapping, and text-overflow ellipsis. In Flexbox or Grid, the containing item must also be able to shrink.

.title-cell {
  min-inline-size: 0;
}

.title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

If ellipsis does not appear, inspect the box receiving the property and confirm that its content actually overflows that box.

Animations, Transitions, and Temporary States

An animation can make the final screenshot appear to show a layout failure when the underlying static geometry is correct. Pause animations in DevTools or temporarily disable animation, transition, and transform. Inspect both initial and final keyframe values.

Dropdowns triggered by focus or hover may close when focus moves into DevTools. Use the browser's state-forcing and focused-page emulation features to preserve the condition. Check loading, opening, closing, and error states because the bug may exist only during a transition.

Font Loading and Layout Shift

Fallback and web fonts have different glyph widths, line metrics, and weights. A heading may fit initially, then wrap after the web font loads. Verify the actual rendered font in DevTools and inspect network or console errors when a font fails.

Design text containers with tolerance for metric changes. Avoid fixed heights tied to one font, load only required font files, and select fallbacks with reasonably compatible metrics. Reproduce the page with cache disabled to observe the loading transition.

Stress-Test Real Content

Replace short labels with long meaningful text, long URLs, user names, translated strings, and validation messages. Test empty titles, missing images, zero items, one item, and large collections. A component that works only with ideal content is not robust.

Also test right-to-left direction and logical properties when the product supports RTL languages. Physical left and right offsets, asymmetric margins, and directional icons often expose assumptions that remain hidden in left-to-right screenshots.

Zoom, Text Scaling, and Accessibility

Test browser zoom at 125, 150, 200, and up to the required accessibility range. Watch for clipped labels, overlapping controls, inaccessible scroll regions, and fixed headers covering focus. Increase text size independently where supported because text-only scaling can expose different failures.

Navigate with the keyboard and confirm focus indicators remain visible. Responsive debugging is incomplete if the layout looks correct but tab order, hit targets, or focused content become obscured. Layout must preserve both information and operation.

Common Problem Matrix

Real-World Example: Mobile Horizontal Overflow

A hero uses viewport width plus padding and makes the page scroll sideways:

.hero {
  width: 100vw;
  padding: 2rem;
}

Inspecting the box model shows that the border box exceeds the available document width. If the hero should fill its parent, a safer structure is:

.hero {
  inline-size: 100%;
  padding: 2rem;
  box-sizing: border-box;
}

The root fix is the sizing model. Adding overflow-x: hidden to body would only conceal the evidence and could hide meaningful content.

Real-World Example: Flex Ellipsis

A card row contains an icon and a long title. The title has ellipsis rules but still forces the card wider. The text box is inside a flex item whose automatic minimum preserves its min-content width.

.card {
  display: flex;
  gap: 0.75rem;
}

.card__content {
  min-inline-size: 0;
}

.card__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

The key correction belongs to the shrinkable flex item, not merely to the descendant text.

Real-World Example: Layered Dropdown

A dropdown uses z-index 9999 but remains beneath a header. Inspection shows that the dropdown's nav parent has z-index 1, while the header forms a sibling stacking context at z-index 10. The dropdown cannot escape its parent's lower context.

The correction is to place the relevant parent context above the competing context or render the menu in a suitable overlay layer. Continually increasing the child's number does not change the comparison between parent contexts.

Common Interview Questions

What is the first step in layout debugging? Reproduce the failure, inspect the exact rendered element, and compare expected geometry with computed styles and box-model measurements.

Why can a flex child overflow with flex: 1? Its automatic minimum size may preserve its content-based minimum. Setting min-width: 0 or min-inline-size: 0 on the intended flex item can allow shrinking.

Why can a 1fr grid track overflow? A flexible track outside minmax has an automatic minimum that can honor intrinsic content. minmax(0, 1fr) explicitly permits a zero minimum when that behavior is appropriate.

Why does z-index not fix clipping? Z-index controls stacking within stacking contexts, while overflow controls clipping. A higher stacking number does not escape an ancestor's clip.

How do you isolate a bad rule? Toggle declarations in DevTools, use binary search across rule groups, and reduce the case to the minimum HTML and CSS that still reproduce the problem.

Practical Debugging Checklist

• Reproduce the issue with an exact viewport, state, content, and zoom level.
• Select the real rendered node and confirm the browser-created DOM structure.
• Compare matched declarations with final computed values.
• Inspect content, padding, border, margin, gap, and box-sizing.
• Identify the element's formatting context and its direct layout parent.
• Check preferred, minimum, maximum, and intrinsic dimensions.
• Use flex and grid overlays before changing alignment or track rules.
• Inspect ancestor overflow, positioning, containing blocks, and stacking contexts.
• Toggle suspicious declarations instead of adding speculative overrides.
• Test every width around the failure rather than only device presets.
• Stress-test long, empty, translated, dynamic, and right-to-left content.
• Verify zoom, keyboard focus, pointer interaction, fonts, and loading states.
• Create a minimal reproduction when the relationship remains unclear.
• Fix the first incorrect constraint and remove temporary debug styles.

Key Takeaway

CSS layout debugging becomes predictable when it is treated as an investigation rather than a sequence of guesses. Define the expected result, measure the rendered result, identify the layout algorithm and constraints that produced it, and change the smallest rule that violates the component's design contract.

Most failures can be traced through a consistent order: DOM structure, cascade, box model, parent context, preferred and min/max sizing, Flexbox or Grid behavior, overflow, positioning, stacking, and responsive conditions. Developer tools expose each layer. With that evidence, the fix is usually clearer, smaller, and more durable than another override, negative margin, enormous z-index, or global overflow mask.