Why Does My Overlay Not Cover the Whole Page?

by

Overlay not covering whole page bugs happen when an overlay is sized to a parent, placed under a header, trapped in a scroll area, or mounted in the wrong layer.

CSS Overlay Fix

Why Does My Overlay Not Cover the Whole Page?

An overlay not cover whole page bug usually means the overlay is not actually sized or layered against the full viewport. It may be positioned inside a parent, limited by a grid column, trapped under a sticky header, clipped by a scroll container, or using height:100% when the page needs viewport-based sizing.

This is one of those bugs that looks simple but can destroy the feel of a page. A backdrop that only covers half the screen makes the modal feel broken. A menu overlay that stops under the header feels unfinished. A loading overlay that covers only one section can confuse users about what is actually disabled.

  • overlay
  • fixed inset
  • viewport coverage
  • z-index layers

Test viewport ownership first

Temporarily change the overlay to position:fixed; inset:0; and move it near the end of the body or into a root overlay layer. If it suddenly covers the whole page, the original overlay was attached to the wrong parent or layer.

Related: Try this in the FrontFixer Live Inspector.

Open Live Inspector

What the bug looks like

The backdrop, loading screen, menu layer, or dimmed area covers only part of the page.

Why it happens

The overlay is filling a parent, section, grid column, or scroll container instead of the viewport.

What usually fixes it

Use a fixed root overlay with inset:0 and a clear z-index layer.

Why overlays fail to cover the full viewport

An overlay is supposed to communicate control. When a modal opens, a menu slides out, or a loading state appears, users expect the affected area to be obvious. If the overlay only covers the component, the main column, or the area below the header, the interface sends mixed signals.

The overlay not cover whole page problem usually comes from mixing local layout rules with global UI intent. A card overlay can be local. A full-page modal backdrop should not be local. A section loading shimmer can belong inside one section. A global loading lock should belong to the viewport.

The clean fix is to decide the overlay’s job first. If it should cover the whole page, mount it in a root layer and size it to the viewport. If it should cover only one card, keep it inside that card intentionally.

Local overlayGood for cards, sections, and small loading states.
Global overlayNeeded for modals, drawers, menus, and page locks.
Viewport sizingfixed plus inset:0 is the safe baseline.
Better mindsetCoverage is a layout decision, not decoration.
Error 1

The overlay uses height:100% inside a short parent

height:100% does not automatically mean the full page. It means the height of the containing block. If the parent is only a card, section, or wrapper, the overlay will only cover that parent.

Broken code

Parent-sized overlay 
.section {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
}

Broken visual result

Only covers parent
Page header
Overlay only fills section
The overlay is doing exactly what the CSS says: it fills the parent, not the viewport.

Correct code

Viewport overlay 
.overlay {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 1000;
}

Fixed visual result

Covers viewport
Page still exists below
Overlay covers the whole viewport area
Use fixed inset when the overlay is supposed to cover the page.
Error 2

The header stays above the overlay

Sometimes the overlay covers most of the page but the sticky header remains visible. That usually means the header has a higher z-index or the overlay is mounted below a layer system that the header already owns.

Broken code

Overlay below header 
.header {
  position: sticky;
  z-index: 100;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
}

Broken visual result

Header leaks through
Overlay behind header layer
Sticky header still clickable
The overlay covers the viewport but loses the stacking battle to the header.

Correct code

Overlay above page chrome 
:root {
  --z-header: 100;
  --z-overlay: 1000;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
}

Fixed visual result

Overlay owns top layer
Header below overlay
Overlay is above header and page content
Give overlay layers a clear z-index token above normal page chrome.
Error 3

The overlay is trapped inside a scroll container

A scrollable parent can make an overlay cover only the visible panel or scroll with the content. This is common in dashboards, drawers, sidebars, tables, and app layouts with internal scrolling.

Broken code

Overlay inside scroll panel 
.panel {
  max-height: 500px;
  overflow: auto;
  position: relative;
}

.panel .overlay {
  position: absolute;
  inset: 0;
}

Broken visual result

Panel-sized overlay
Overlay trapped in scroll panel
The overlay belongs to the scroll panel, so it cannot behave like a page overlay.

Correct code

Root overlay outside scroll 
.panel {
  max-height: 500px;
  overflow: auto;
}

.overlay-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

Fixed visual result

Root overlay ignores scroll
Overlay root covers full panel and page
The scroll panel can remain scrollable while the overlay sits outside it.
Error 4

The overlay is mounted inside the main grid column

In two-column layouts, the overlay may be placed inside the main content column instead of a page-level root. It then covers only the article area while the sidebar, header, or other page regions remain uncovered.

Broken code

Overlay inside main column 
.layout {
  display: grid;
  grid-template-columns: 1fr 280px;
}

.main .overlay {
  position: absolute;
  inset: 0;
}

Broken visual result

Sidebar uncovered
Sidebar still exposed
Overlay only covers main column
The overlay is mounted in the main column, so the sidebar remains outside the covered area.

Correct code

Overlay outside layout grid 
.layout {
  display: grid;
  grid-template-columns: 1fr 280px;
}

.page-overlay {
  position: fixed;
  inset: 0;
}

Fixed visual result

Whole layout covered
Sidebar below overlay
Overlay root covers the full page layout
Mount global overlays beside the layout grid, not inside one grid column.
Premium patterns

Three production-minded overlay coverage patterns

Premium overlay systems define coverage, scroll behavior, and layer order on purpose. Below are three different visual patterns so the overlay architecture does not become a repeated template.

Premium code example 1

Full-page overlay stack 
:root {
  --z-header: 100;
  --z-backdrop: 900;
  --z-dialog: 1000;
}

.overlay-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
}

.dialog {
  position: fixed;
  z-index: var(--z-dialog);
}

Premium visual result 1

Layer order blueprint
premium
Overlay stack above page chrome

The header stays in the app layer while backdrop and dialog own the overlay layer.

dialog backdrop header page
No exposed page zones
Pattern 1 is ideal for modal backdrops, confirmation dialogs, and blocking page states.

Premium code example 2

Mobile viewport overlay 
.mobile-overlay {
  position: fixed;
  inset: 0;
  min-height: 100dvh;
  overflow: auto;
}

.mobile-overlay__panel {
  width: min(420px, 100%);
  min-height: 100dvh;
}

Premium visual result 2

Mobile coverage map
premium
Mobile overlay respects dynamic viewport

The overlay uses viewport units and internal scrolling instead of depending on page height.

100dvh overlay
fixed inset mobile viewport internal scroll safe coverage
Pattern 2 is ideal for mobile menus, drawers, checkout steps, and full-screen filters.

Premium code example 3

Local vs global overlay tokens 
.card-overlay {
  position: absolute;
  inset: 0;
}

.page-overlay {
  position: fixed;
  inset: 0;
}

.is-page-locked {
  overflow: hidden;
}

Premium visual result 3

Coverage decision system
premium
Choose coverage before styling

The component can use a local overlay, while the app can use a global overlay root.

Card stateabsolute inset
Page statefixed inset
Locked statebody scroll off
Pattern 3 is ideal for design systems that need both section overlays and full-page overlays.

Fast practical rule

If the overlay should cover the whole page, use position:fixed, inset:0, and a root overlay layer. Do not rely on height:100%, main-column placement, or a local parent unless the overlay is intentionally local.

Debug checklist

  • Check whether the overlay is absolute or fixed.
  • Replace width and height rules with inset:0 for full-page overlays.
  • Inspect whether the overlay is mounted inside a card, section, grid column, or scroll container.
  • Compare the overlay z-index against sticky headers, menus, drawers, and modals.
  • Look for parent overflow:hidden or overflow:auto.
  • Use a root overlay layer for modals, page locks, loading screens, and menus.
  • Use local overlays only for local card or section states.
  • Test mobile viewport height with address bars and long content.
Best first moveTry position:fixed; inset:0 and retest coverage.
Most common causeThe overlay is filling a parent instead of the viewport.
Most sneaky causeThe header has a higher z-index than the overlay.
Better mindsetChoose local or global coverage before styling the overlay.

When a partial overlay is correct

Partial overlays are not always wrong. A card loading state, image hover layer, table blocker, or local section skeleton can correctly cover only one component. The problem begins when the overlay is meant to block the page but is mounted like a local component.

Use local overlays for local states. Use global overlays for global states. That simple separation prevents most coverage bugs before they appear.

This also keeps the article intent clean: this fix is about coverage area, not a generic modal bug or a generic z-index bug. The main question is whether the overlay owns the viewport or only owns a component.

The authority move is not to make every overlay full-screen. The authority move is to make the coverage match the user’s expectation.

Why this bug feels so visible

Users do not need to understand CSS to feel when an overlay is wrong. They see uncovered areas, clickable headers, floating sidebars, or page content that should be disabled but still looks active. That visual mismatch creates distrust quickly.

A correct overlay makes the interface state obvious. It tells users whether the whole page is blocked, one section is loading, or a focused dialog needs attention.

Related fixes that can help

Overlay coverage bugs often connect to modal order, z-index, sticky headers, dropdown clipping, tooltip layers, and button click problems.

Why is my modal behind overlay? If the backdrop covers the dialog or the dialog sits in the wrong layer. Read this fix
Fix z-index not working If layer numbers are fighting across the page. Read this fix
Why is my fixed header covering content? If a sticky or fixed header is affecting page coverage. Read this fix
Why is my dropdown getting cut off? If the same parent boundary issue affects floating menus. Read this fix
Tooltip hidden behind elements If smaller floating layers also lose to page structure. Read this fix
Fix button not clickable If the overlay is covering or blocking the wrong clickable area. Read this fix

Final takeaway

An overlay not cover whole page bug usually happens because the overlay is local while the design expects it to be global. The CSS may be filling a parent, grid column, scroll panel, or lower z-index layer instead of the viewport.

Use a root overlay layer, position:fixed, inset:0, and clear z-index tokens when the whole page must be covered. Keep partial overlays only when the component itself is the intended coverage area.

Want more fixes like this?

Browse more CSS overlay, z-index, fixed positioning, modal, dropdown, and responsive layout debugging guides in the FrontFixer library.

CSS Fixes All Fixes

Leave a Comment