Limited support Use with care and confirm browser support before shipping it to all users.

overflow: overlay

The overflow: overlay CSS declaration is an alias to overflow: auto. Historically, it caused non-standard behavior, allowing scrollbars to overlay content without taking up layout space. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Syntax and cascadeVisual stylingScrolling

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.overflow.overlay
Deprecated
114
114
112
12
114
12
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (114)
Implementation note
  • Before version 114, the `overlay` keyword caused non-standard behavior, allowing scrollbars to overlay content without taking up layout space. From version 114, the keyword aliases to the standard `auto` keyword. See bug 40444262.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (114)
Implementation note
  • Before version 114, the `overlay` keyword caused non-standard behavior, allowing scrollbars to overlay content without taking up layout space. From version 114, the keyword aliases to the standard `auto` keyword. See bug 40444262.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (12)
Implementation note
  • Before version 12, the `overlay` keyword caused non-standard behavior, allowing scrollbars to overlay content without taking up layout space. From version 12, the keyword aliases to the standard `auto` keyword. See bug 189811.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (114)
Implementation note
  • Before version 114, the `overlay` keyword caused non-standard behavior, allowing scrollbars to overlay content without taking up layout space. From version 114, the keyword aliases to the standard `auto` keyword. See bug 40444262.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (12)
Implementation note
  • Before version 12, the `overlay` keyword caused non-standard behavior, allowing scrollbars to overlay content without taking up layout space. From version 12, the keyword aliases to the standard `auto` keyword. See bug 189811.

Syntax

CSS 
.container {
  overflow: overlay;
  /* Equivalent to overflow: auto */
}

Live demo

overlay

CSS Overlay demo.

PreviewFullscreen

auto

CSS Auto demo.

PreviewFullscreen

scroll

CSS Scroll demo.

PreviewFullscreen

Use cases

  • Use overflow: overlay

    Use overflow: overlay when the default CSS behavior is not expressive enough for the component or layout you are building.

  • Handle edge cases

    Apply overflow: overlay to solve a specific styling constraint without introducing broader layout or behavior changes.

Cautions

  • Test overflow: overlay in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
  • Plan a fallback or acceptable degradation path when support is still limited.

Accessibility

  • Confirm that using overflow: overlay does not make content harder to perceive, understand, or operate in assistive contexts.

Related links