Position-visibility - Propriété CSS

position-visibility

Résumé des caractéristiques de la propriété position-visibility

Description rapide
Définit si l'élément positionné est visible ou pas, dans le contexte d'un positionnement par ancrage.
Statut
Standard
S'applique à
Éléments positionnés en fixed ou en absolute.
Valeurs prédéfinies
anchors-visible | always | anchors-valid | no-overflow
Pourcentages
Ne s'appliquent pas.
Valeur initiale
anchors-visible (1)
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété position-visibility passe d'une valeur à l'autre sans transition.
Ordre canonique
Per grammar : sérialisation dans l'ordre de la syntaxe.
Module W3C
Module CSS - Positionnement par ancrages
Références (W3C)
Statut du document: WD (document de travail)

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

Schéma de la syntaxe de position-visibility.

position-visibility - Syntax DiagramSyntax diagram of the position-visibility CSS property. always always anchors-valid anchors-valid anchors-visible anchors-visible no-overflow no-overflowposition-visibility:;position-visibility:;
Schéma syntaxique de la propriété position-visibility.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma.

Description de la propriété position-visibility.

⚠
Le fonctionnement est encore capricieux sur certains navigateurs.

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 subtile.


Reportez-vous à la page anchor-name pour avoir un tutoriel sur le 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-visible;

    anchors-visible active le masquage du texte positionné 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é au dessus de l'ancre disparaît lorsque l'image n'est plus du tout visible. En faisant défiler la page vers le haut, c'est le texte positionné au dessus de l'ancre qui disparaît. 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: anchors-valid; ⚠

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

    ⚓
    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.

    ⚓
    Texte positionné au dessus
    de l'ancre.
    Texte positionné
    en dessous de l'ancre.


    Il est possible de cumuler les valeurs trois anchors-visible et no-overflow et anchors-valid.

  • position-visibility: initial; (anchors-visible (1)) position-visibility: inherit; position-visibility: revert; position-visibility: revert-layer; position-visibility: revert-rule; position-visibility: unset;

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

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

Le simulateur définit une ancre sur l'image ; le texte positionné se place 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, réduisez la hauteur du conteneur, ou utiliser le bouton "Cacher l'ancre".
Pour la valeur no-overflow, réduisez la largeur du conteneur. Dès que le texte positionné ne peut plus être affiché en entier, il disparaît complètement.

position-visibility :
⚓
Texte positionné
Ce texte s'affiche ou se masque en
fonction de la valeur attribuée
à la propriété position-visibility.

Compatibilité des navigateurs avec position-visibility.

Les navigateurs gèrent maintenant correctement le positionnement par ancrage, à quelques exceptions près :

  • Il semble que tous les éléments concernés par le positionnement (ancre et éléments positionnés) doivent avoir un ID, même s'il n'est pas utilisé.
  • Il y a des différences de comportement entre position:absolute et position:relative dont la norme ne parle pas.
Colonne 1
Prise en charge générale du positionnement par ancrage.
Colonne 2
Support de la propriété position-visibility (positionnement par ancrage).

Remarques :

(1) Samsung Internet ne supporte pas la propriété position-anchor avec la valeur normal.
Et ne supporte pas complètement la propriété anchor-visibility.

(2) Android Browser ne supporte pas la propriété position-anchor avec la valeur normal.
Il ne supporte pas non plus complètement la propriété anchor-visibility.

(3) Ne supporte pas totalement la propriété anchor-visibility.

(4) Firefox ne permet pas l'animation des fonctions anchor() et anchor-size().
Il ne supporte pas non plus totalement la propriété anchor-visibility.

(5) Opéra ne supporte pas la propriété position-anchor avec la valeur normal.
Il ne supporte pas non plus complètement la propriété anchor-visibility.

1
Positionnement
par ancrage
2
Propriété
position-visibility
Estimation de la prise en charge globale.
86%
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

1

Androïd Brower

2

Chrome

3

Chrome pour Androïd

3

Edge

3

Firefox

4

Firefox pour Androïd

4

KaiOS Browser

Opéra

5

Safari

Safari sur IOS

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).
    WD
    29 Juin 2023
    Document de travail.
    CR
    PR
    REC

Voir aussi, à propos des positionnement par ancrage.

Les propriétés, fonctions, directive qui gèrent le positionnement par ancrage sont regroupés dans le module CSS - Positionnement par ancrages. Ce sont celles qui sont listés ci-dessous.

Propriétés :

anchor-name
Définit un identifiant pour l'élément qui peut dès lors devenir une ancre, dans le cadre du positionnement pas ancrage.
anchor-scope
Définit la portée de la propriété anchor-name.
position-anchor
Définit par rapport à quelle ancre doit se positionner l'élément.
position-area
Définit comment se positionne un élément par rapport à l'ancre (au dessus, à côté, etc.).
position-try
Propriété raccourcie qui résume les valeurs pour position-try-fallbacks et position-try-order.
position-try-fallbacks
Spécifie une liste de position pour l'élément positionné (positionnement par ancrage) afin que le navigateur puisse choisir celle qui est le plus adapté à un moment donné, compte tenu des défilements ou des zooms.
position-try-order
Définit un ordre différent pour les valeurs énumérées par position-try-fallbacks.
Position-visibility
Définit si l'élément positionné est visible ou pas, dans le contexte d'un positionnement par ancrage.

Fonctions :

anchor()
Renvoie la position d'un des bords de l'élément désigné comme ancre (positionnement par ancrage).
anchor-size()
Renvoie la teille (hauteur ou largeur) de l'élément désigné comme l'ancre (positionnement par ancrage).

Directives :

@position-try
Définit un ensemble de règles pour chacune des position d'ancrage et leur donne un nom (positionnement par ancrage).