CSS overlay

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

Why Is My Modal Behind the Overlay?

by

Modal behind overlay problems usually happen when the overlay has a higher z-index than the modal, the modal is trapped inside a stacking context, or the modal and overlay are placed in the wrong HTML structure.

Modal z-index Fix

Why is my modal behind the overlay?

A modal behind overlay bug is one of the most confusing CSS problems because the modal exists, the overlay exists, and the code looks almost right. But visually, the dark overlay sits above the modal, the popup looks faded, or the modal cannot be clicked. The real issue is usually layer order: z-index, stacking context, position, transform, or where the modal is placed in the HTML.

CSS Fixes All Fixes
  • Modal z-index
  • Overlay layer
  • Stacking context
  • Click blocking

What the bug looks like

The modal appears dim, sits under the dark background, cannot be clicked, or looks like it opens behind the page.

Why it happens

The overlay and modal are not in the right stacking order, or the modal is trapped inside a lower stacking context.

What usually fixes it

Put the overlay and modal in one predictable layer system, then make the modal layer higher than the overlay.

Error 1

The overlay has a higher z-index than the modal

This is the simplest version of the bug. The overlay is placed above the page, but the modal is not placed above the overlay. The result is a popup that looks hidden, darkened, or unclickable.

Broken code

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

.modal {
  position: fixed;
  z-index: 50;
}

Broken visual result

Modal is under overlay
Page content
behind Modal

The popup is lower than the overlay layer.

The modal exists, but the overlay paints above it and steals the visual focus.

Correct code

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

.modal {
  position: fixed;
  z-index: 1001;
}

Fixed visual result

Modal above overlay
Page content
above Modal

The popup is now above the overlay layer.

The modal layer must be higher than the overlay layer.
Error 2

The modal is trapped inside a stacking context

A modal can have a huge z-index and still lose if it is inside a parent stacking context. A transformed parent, filtered parent, or positioned parent with its own z-index can trap the modal below the page overlay.

Broken code

Trapped modal 
.card {
  transform: translateZ(0);
  z-index: 1;
}

.card .modal {
  position: fixed;
  z-index: 9999;
}

Broken visual result

Huge z-index still loses
Transformed parent
trapped Modal

The modal is inside a lower parent context.

A huge z-index cannot escape a parent stacking context.

Correct code

Page-level modal 
<body>
  <main class="page">...</main>

  <div class="overlay"></div>
  <div class="modal">...</div>
</body>

Fixed visual result

Modal escaped the trap
Page card
page level Modal

The modal is a sibling of the overlay at page level.

Place app-level overlays and modals near the end of the body or in a portal/root layer.
Error 3

The modal has z-index, but no useful positioning

Developers often add z-index to a modal and expect it to jump above everything. But if the element is not positioned or not participating in a stacking order that accepts z-index, the value may not solve the layer problem.

Broken code

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

.modal {
  z-index: 100;
}

Broken visual result

Layer rule incomplete
Page content
incomplete Modal

The modal layer is not defined clearly.

z-index alone is not a complete modal positioning system.

Correct code

Positioned modal layer 
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
}

.modal {
  position: fixed;
  inset: auto;
  z-index: 30;
}

Fixed visual result

Position and layer agree
Page content
defined Modal

The modal is positioned and layered above the overlay.

For modals, define both placement and layer order explicitly.
Error 4

The HTML order makes the overlay cover the modal

When two positioned elements are in the same stacking level, later elements can paint above earlier elements. If the overlay is inserted after the modal and both use similar z-index values, the overlay may cover the modal.

Broken code

Overlay after modal 
<div class="modal">...</div>
<div class="overlay"></div>

Broken visual result

DOM order fights layer order
Page content
covered Modal

The overlay is inserted after this layer.

When layers are not explicit, DOM order can make the overlay paint above the modal.

Correct code

Explicit layer order 
<div class="overlay"></div>
<div class="modal">...</div>

Fixed visual result

Overlay below modal
Page content
top layer Modal

The modal is inserted and layered above the overlay.

Use clear z-index values and sensible HTML order for overlay systems.
Premium pattern

A production-minded modal layer pattern

A reliable modal system uses named layer values, keeps modal and overlay close together in the DOM, and avoids placing modals inside transformed cards, sliders, headers, or small layout wrappers.

Premium code

Predictable modal stack 
<div class="modal-root">
  <div class="modal-overlay"></div>

  <section class="modal-dialog" role="dialog" aria-modal="true">
    ...
  </section>
</div>
:root {
  --layer-overlay: 1000;
  --layer-modal: 1010;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--layer-overlay);
  background: rgba(15, 23, 42, .64);
}

.modal-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: var(--layer-modal);
  transform: translate(-50%, -50%);
  width: min(100% - 32px, 480px);
}

Premium visual result

Modal system, not z-index guessing
Page content
clean layer Modal dialog

The overlay and dialog have predictable, named layers.

Premium modal CSS avoids random z-index numbers and makes the layer order obvious.

Fast practical rule

If your modal is behind the overlay, compare the overlay layer and the modal layer first. Then inspect the modal’s parents for stacking context traps like transform, opacity, filter, isolation, and positioned wrappers.

Debug checklist

  • Inspect the overlay and modal in DevTools and compare their computed z-index values.
  • Make sure both overlay and modal have a real position, usually position:fixed.
  • Keep the modal z-index higher than the overlay z-index.
  • Check whether the modal is inside a transformed, filtered, or positioned parent.
  • Move app-level modals near the end of the document or into a dedicated modal root.
  • Avoid random values like z-index:999999; use a small layer scale instead.
  • Check whether the overlay is stealing clicks with pointer-events.
  • Verify that the modal is not inside a header, slider, card, or overflow-hidden wrapper.
Best first move Temporarily lower the overlay z-index. If the modal appears, the issue is layer order.
Most common cause The overlay has a higher z-index than the modal.
Most sneaky cause A parent with transform traps the modal inside a lower stacking context.
Better mindset A modal should be a page-level layer, not a child of whatever section opened it.

Related fixes that can help

Modal behind overlay bugs are usually connected to z-index, stacking context, HTML structure, and invisible click-blocking layers.

Fix z-index not working If changing z-index does nothing, the real issue may be stacking context. Read this fix
Why is my button not clickable? If the modal opens but the close button or CTA cannot be clicked. Read this fix
Fix HTML structure problems If the modal is nested inside the wrong container or component. Read this fix
Why is my sticky header not staying on top? If headers, overlays, and modals are competing for the same top layer. Read this fix
Why is my mobile menu not opening? If the same overlay or layer bug is breaking a mobile menu. Read this fix
Why is my page wider than the screen? If the modal or overlay also creates horizontal overflow on mobile. Read this fix

Final takeaway

A modal behind overlay problem is usually not fixed by throwing a bigger z-index at the modal. The real fix is to understand which stacking context the modal belongs to and whether the overlay is above it.

Place the overlay and modal in a predictable page-level layer, give the overlay a lower layer than the modal, and avoid trapping the modal inside transformed or overflow-heavy parents.

Want more fixes like this?

Browse more z-index, overlay, and CSS debugging guides in the FrontFixer library.

CSS Fixes All Fixes