Add a Cookie Banner Without Shifting or Obscuring Content

.consent-slot { min-block-size: 0; }

.consent-slot { min-block-size: 128px; }
dismissButton.onclick = () => previousTarget.focus();

Root cause

Automatically inserting a notice at the top of normal flow increases the document height above the current task. The result is unexpected movement. Moving the same notice to a fixed overlay can avoid that movement, but it introduces a different risk if the overlay hides content or keyboard focus.

This fixture chooses a third approach: a preallocated normal-flow region. It avoids overlap and gives the banner a predictable reading and focus position. The fixed height is specific to the controlled English fixture and must not be copied to notices with different text, localization, controls, or legal requirements.

Focus behavior

The notice does not steal focus when it appears. Both actions are native buttons. When either action dismisses the fixture, the script removes the notice and restores focus to the task control that was active before insertion. This behavior is tested for keyboard continuity; it does not store a consent decision.

Measurement support

Every browser records the notice region’s height before and after insertion, the task control’s movement, and the result of a programmatic keyboard-path dismissal. Chromium additionally records non-input Layout Instability API entries for insertion.

When this fix is not enough

A production consent interface needs requirements based on actual jurisdictions, vendors, purposes, and data flows. Long translations can exceed a fixed region. Modal implementations require a complete dialog focus model. Fixed overlays require separate obstruction checks at every supported viewport.

Regression condition

At 320 and 375 CSS pixels, the failing insertion must move the task by 128 pixels. The fixed region must remain 128 pixels before and after insertion and produce zero target movement. In the fixed state, activating a notice action must remove the notice and return focus to the task control. Both states must have zero horizontal page overflow.