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.
Overview
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.overflow.overlay Deprecated | 114 | 114 | 112 | 12 | 114 | 12 |
- This browser only partially implements this feature
- This feature was removed in a later browser version (114)
- 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.
- This browser only partially implements this feature
- This feature was removed in a later browser version (114)
- 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.
- This browser only partially implements this feature
- This feature was removed in a later browser version (12)
- 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.
- This browser only partially implements this feature
- This feature was removed in a later browser version (114)
- 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.
- This browser only partially implements this feature
- This feature was removed in a later browser version (12)
- 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
.container {
overflow: overlay;
/* Equivalent to overflow: auto */
}Live demo
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
Powered by web-features