Position-visibility - Propriété CSS

Schéma de la syntaxe de position-visibility.

Description de la propriété position-visibility.

La propriété position-visibility intervient dans le cas d'un élément positionné par ancrage, c'est à dire par rapport à un autre élément, dénommé l'ancre. Pour davantage de renseignements sur le positionnement par ancrage; nous vous invitons à consulter les pages sur anchor-name, position-anchor ou encore position-area.

La propriété position-visibility fait disparaître l'élément positionné lorsque son ancre n'est plus affiché, soit parce qu'elle est sortie de la fenêtre d'affichage à la suite d'un scrolling, soit parce qu'elle est masquée par un autre élément positionné en absolu.

Rappelons qu'il existe une propriété position-try et une directive du même nom, qui permettent souvent de gérer l'affichage de l'élément positionné de façon plus simple.

Valeurs pour position-visibility.

• position-visibility: always;

  La propriété est sans effet. L'élément positionné est toujours affiché (sauf si un défilement l'emmène hors de la fenêtre d'affichage).

  
  Navigateur
  Chrome
• position-visibility: anchors-valid; ⚠

  Si l'ancre associé à cet élément ne correspond pas à une boîte valide, l'élément est masqué.
  Les navigateurs ne gèrent pas encore cette valeur.

  
  Navigateur
  Chrome
• position-visibility: anchors-visible;

  Si l'ancre associé à cet élément est hors du viewport ou masqué par un élément positionné en absolute, anchor-visible est équivalent à masqué.

  Faites défiler lentement l'écran vers le haut, l'élément positionné passe d'bord au dessus de l'image (propriété position-try) puis disparaît lorsque l'image n'est plus du tout visible.

  
  Navigateur
  Chrome
• position-visibility: no-overflow;

  L'élément est masqué s'il sort de la fenêtre d'affichage, même après application de position-try.

  
  Navigateur
  Chrome
• position-visibility: initial; (anchors-visible) position-visibility: inherit; position-visibility: revert; position-visibility: revertLayer; position-visibility: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Compatibilité des navigateurs avec position-visibility.

Firefox   et Safari   ne gèrent pas encore le positionnement par ancrage (2025). Cela ne devrait cependant pas tarder pour Safari.

1

Positionnement
par ancrage

2

Propriété
position-visibility

Estimation de la prise en charge globale.

71%

71%

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

Samsung Internet

Opéra

Firefox pour Androïd

Chrome

Edge

Safari

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

KaiOS Browser

Opéra mini

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

Caniuse

Caniuse

Histoire de la propriété position-visibility.

• Module CSS - Positionnement par ancrages - Niveau 1

  Première présentation de la propriété position-visibility (positionnement par ancrage).
  

  29 Juin 2023

  Document de travail.

  

  

  

Voir aussi, à propos des positionnement par ancrage.

Propriétés :

Directives :