CSS overflow: overlay

Overview

The overlay property is a non-standard property to make scrollbars display on top of content rather than below it. This feature is being standardized as the scrollbar-gutter property. By default, the overflow-anchor value is auto and it lets you mitigate this jarring user experience by keeping track of the position of an anchor node and adjusting the scroll offset accordingly.

Formal Definition

Specifications

CSS Overflow Module Level 3 # propdef-overflow

Syntax

/* Keyword values */
 overflow: visible;
 overflow: hidden;
 overflow: clip;
 overflow: scroll;
 overflow: auto;
 overflow: hidden visible;
 /* Global values */
 overflow: inherit;
 overflow: initial;
 overflow: revert;
 overflow: unset;

Code snippets

css-overflow-overlay.html

Source:css-overflow-overlay.html

index.html

Source:index.html

Browser Compatibility