The overlay CSS property

[josepharhar]

Description

The overlay CSS property allows developers to control whether an element is in the top layer during an animation into or out of the top layer. This property is one of the pieces which makes top layer elements animatable: https://github.com/chrishtr/rendering/blob/master/entry-exit-animations.md

Specification

https://drafts.csswg.org/css-position-4/#overlay

Open Issues

No response

Tests

https://wpt.fyi/results/css/css-position/overlay

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

Gecko: mozilla/standards-positions#777

WebKit: WebKit/standards-positions#169

Browser bug reports

No bugs filed yet that I know of

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

https://chromestatus.com/metrics/css/timeline/popularity/748

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[josepharhar]

Original proposal: #495

[nairnandu]

Thank you for proposing the overlay CSS property for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop 2024. This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year, if necessary.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.