Pourquoi « bottom : 0 » dans Sticky Positioning agit-il à l'opposé des attentes ?-tutoriel CSS-php.cn

Pourquoi « bottom : 0 » dans Sticky Positioning agit-il à l'opposé des attentes ?

Mary-Kate Olsen

Libérer： 2024-11-26 18:37:11

original

135 Les gens l'ont consulté

Why Does `bottom: 0` in Sticky Positioning Act Opposite to Expectations?

Comportement inattendu avec le positionnement collant : bottom : 0

En explorant la propriété de position CSS, les développeurs peuvent rencontrer un comportement inattendu lors de la spécification de bottom : 0 pour un positionnement collant. Selon la documentation MDN, les éléments collants sont initialement traités comme des éléments de position relative jusqu'à ce qu'un seuil spécifié soit atteint, après quoi ils passent à un positionnement fixe. Cependant, lorsque bottom : 0 est spécifié, le comportement opposé se produit.

Comportement attendu par rapport au comportement réel

La documentation MDN suggère que les éléments avec bottom : 0 doivent être relatif lorsqu'il est en dessous de la fenêtre et fixe lorsqu'il est au-dessus. Cependant, le comportement réel est inversé : les éléments sont fixes lorsqu'ils sont en dessous de la fenêtre et relatifs lorsqu'ils sont au-dessus.

Explication

Cette divergence provient du libellé de la documentation MDN. . Il indique que les éléments collants sont traités comme relatifs jusqu'à ce que le seuil soit dépassé, sans nécessairement commencer comme relatifs. Dans le cas de bottom: 0, le seuil est effectivement dépassé dès le début, car l'élément commence en dessous du bas de la fenêtre. Par conséquent, l'élément commence comme fixe et devient relatif lorsqu'il défile au-delà de son point de départ.

Exemple d'illustration

Considérez le code HTML et CSS suivant :

<body>

Copier après la connexion

.a {
  margin-top: auto;
  position: sticky;
  bottom: 0;
}

.b {
  position: sticky;
  top: 0;
}

Copier après la connexion

Dans cet exemple, l'élément A commence comme relatif et devient fixe lorsqu'il défile vers le bas. L'élément B, en revanche, commence comme fixe et devient relatif lorsqu'il défile vers le haut. Ce comportement s'aligne sur le comportement réel décrit ci-dessus, où bottom : 0 entraîne un positionnement fixe au départ.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!