Position-visibility - Propriété CSS

(1) en fait les navigateurs utilisé always comme valeur initiale.

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.

Reportez-vous à la page anchor-name pour avoir la liste des propriétés relatives au positionnement par ancrage.

Valeurs pour position-visibility.

• position-visibility: always;

  La propriété est sans effet. L'élément positionné est toujours affiché (sauf sil se retrouve hors de la fenêtre d'affichage).

  

  Texte positionné
  en dessous de l'ancre

  Texte positionné
  en dessus de l'ancre
• 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.

  

  Texte positionné
  au dessus de l'ancre

  Texte positionné
  au dessous de l'ancre
• position-visibility: anchors-visible;

  anchors-visible est équivalent à masqué dans les cas suivants :

  • L'ancre est hors de la fenêtre d'affichage.
  • L'ancre est masqué par un autre élément positionné.
  • L'ancre est elle-même masqué (propriété visibility:hiddent ou display:none).

  Faites défiler lentement le conteneur vers le bas, le texte positionné disparaît lorsque l'image n'est plus du tout visible. Vous pouvez aussi cliquer sur le bouton "Cacher l'ancre".

  

  Texte positionné
  au dessus de l'ancre

  Texte positionné
  au dessous de l'ancre
• position-visibility: no-overflow;

  L'élément est entièrement masqué dès qu'il commence à sortir de la fenêtre d'affichage. Pour visualiser cela, faites doucement défiler le conteneur vers le bas : dès que l'élément positionné commence à sortir de la fenêtre d'affichage, il disparaît.

  Si l'élément est positionné au dessus de l'ancre, c'est lorsqu'il disparaît vers le haut : s'il est placé en dessous de l'ancre c'est lorsque l'élément disparaît vers le bas. C'est la même chose pour un positionnement à gauche ou à droite de l'ancre.

  Il est possible de cumuler les valeurs anchors-visible et no-overflow. De même qui sera possible d'ajouter la valeur anchors-valid.

  

  Texte positionné
  au dessus de l'ancre

  Texte positionné
  en dessous de l'ancre
• 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.

Exemple interactif avec la propriété position-visibility.

Le simulateur définit une ancre sur l'image ; le texte positionné se positionne par rapport de cet ancre. Vous pouvez faire varier la valeur affectée à position-visibility et examiner le comportement du texte positionné.

Pour la valeur anchors-visible, faite défiler la page vers le haut ou utiliser le bouton "Cacher l'ancre".
Pour la valeur no-overflow, faites doucement défiler la page vers le bas. Dès que le texte positionné ne peut plus être affiché en entier, il disparaît complètement.

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.

Remarques :

(1) Désactivé par défaut. Peut être activé en positionnant le flag layout.css.anchor-positioning.enabled à true.

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

Chrome

Edge

Safari

Opéra

Firefox

1

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

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

  Le positionnement absolu par rapport à la page ou à l'écran peut s'avérer limité lorsque l'on souhaite positionner un élément par rapport à une autre.
  Cette spécification décrit les propriétés nécessaires pour réaliser cela, ainsi que les fonctions anchor() and anchor-size() qui permettent de fixer la position et les dimensions d'un élément en fonction d'un autre.
  Elle décrit également comment tester plusieurs possibilités de positionnement pour s'adapter au contexte, en particulier à l'état du défilement de la page.

  Concernant position-visibility. 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 :

Fonctions :

Directives :