`Overlay` - Propriété CSS

overlay

Résumé des caractéristiques de la propriété `overlay`

Description rapide

Détermine si un élément positionné doit être affiché au dessus des autres.

Statut

Problèmes de compatibilité ⚠

Utilisable sur

HTML

Pourcentages

Ne s'appliquent pas.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

⁽¹⁾

Module W3C

Module CSS - Éléments positionnés

Références (W3C)

CSS Positioned Layout Module Level 4

Statut du document: WD (document de travail)

(1) La propriété overlay est utilisée pendant les transitions, c'est même la seule façon de l'utiliser.

Schéma syntaxique de `overlay`.

Schéma syntaxique de la propriété overlay.
Les liens du schéma donnent accès à plus de détails.

Description de la propriété `overlay`.

⚠

Cette propriété est encore en cours de définition au W3C.
D'autre part, cette propriété n'est pas accessible à l'utilisateur ni au développeur.

Lorsqu'un élément est affiché sur la couche de plus haut niveau, comme c'est le cas des boitez de dialogue modale ou des popover, et qu'il est le sujet de transitions, il se peut qu'il disparaisse avant d'avoir réalisé sa transition de sortie.
overlay définit qu'un élément positionné doit être au dessus de tous les autres jusqu'à ce que plus aucune transitions ne soient actives.

Cette propriété ne peut pas être modifiée par l'utilisateur. En effet les navigateurs disposent en général de l'instruction suivante dans leur feuille de styles, ce qui fait que toutes les déclarations éventuelles de l'utilisateur sont moins pertinentes (voir les règles de priorité).


	* {overlay: none !important;}

Néanmoins l'utilisateur peut intervenir sur la propriété overlay dans le cas d'une transition. car les transitions sont prioritaires par rapport à !important. L'animation de overlay est différente de celle des autres propriétés en ce sens que l'état auto reste celui de la propriété jusqu'à la fin de la transition. Il faut aussi que la propriété transition-behavior soit positionnée sur allow-discrete.

Valeurs pour `overlay`.

overlay: none;

L'élément est restitué conformément à sa propriété z-index.
overlay: auto;

L'élément est restitué au dessus des autres.
overlay: initial; (none) overlay: inherit; overlay: revert; overlay: revertLayer; overlay: unset;

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Prise en charge de `overlay` par les navigateurs.

La propriété overlay n'est pour l'instant pas prise en charge, ni par Firefox , ni par Safari (2025).

Colonne 1

Prise en charge par les navigateurs de la propriété overlay qui impose au premier plan un élément.

Propriété
overlay

Estimation de la prise en charge globale.

77%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Safari sur IOS

Chrome

Edge

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

Safari

Firefox

Samsung Internet

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `overlay`.

Module CSS - Éléments positionnés - Niveau 4

Introduction de la propriété très spéciale overlay.

Voir aussi, à propos du positionnement...

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété overlay fait partie du module CSS Positioned Layout Module.
Les définitions suivantes sont également décrites dans ce même module.