overlay | CSS CSS Properties

A property used for elements in the 'top layer' (like <dialog> or popovers). It specifies whether an element should be rendered in the top layer even when it's not the active modal.

Quick example

.active-popover {
  /* Ensures the popover stays in the top layer during transitions */
  overlay: auto;
  transition: overlay 0.5s allow-discrete;
}

Quick facts

Initial value

none

Inherited

Applies to

all elements

Animation type

discreteButVisibleForDurationWhenAnimatedNone

Values

noneauto

overlay Browser Support

Limited availability 73% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

117+