Pourquoi le positionnement collant avec « bottom : 0 » présente-t-il un comportement inversé par rapport à la documentation MDN ?

Comprendre le comportement opposé du positionnement collant

Dans la documentation MDN, le positionnement collant est décrit comme un hybride de positionnement relatif et fixe, où un élément agit comme un élément à position relative jusqu'à ce qu'un seuil soit dépassé, après quoi il se comporte comme un élément à position fixe. Cependant, en spécifiant bottom: 0 pour le positionnement collant, le comportement semble être inversé.

Mécanisme de positionnement collant

Selon le MDN, les éléments de position collante fonctionnent avec deux états :

1. Mode relatif : L'élément est positionné par rapport au flux de son conteneur ou parent statique.
2. Mode fixe : L'élément est positionné par rapport à la fenêtre, restant à un emplacement fixe.

La transition entre ces états se produit lorsque le seuil spécifié est dépassé.

Explication du scénario

Considérons l'exemple suivant :

<div class="container">
  <header></header>
  <main></main>
  <footer>
    <div class="footer"></div>
  </footer>
</div>

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100vh;
}

.container>* {
  width: 100%;
}

footer {
  background: #faa;
  position: sticky;
  bottom: 0;
}

.footer {
  background: #aff;
  height: 100vh;
}

Lorsque bottom: 0 est spécifié pour l'élément footer, il démarre initialement à l'état fixe car le seuil (le bas de la fenêtre) est dépassée dès le départ. Lorsque vous faites défiler vers le bas, le seuil est toujours dépassé, donc le pied de page reste dans la position fixe.

Cependant, lorsque l'élément de pied de page atteint le seuil (le bas de la fenêtre), il passe en mode relatif car le seuil n'est plus dépassé. C'est le contraire de ce que suggère la documentation MDN, qui indique que la transition doit se produire lorsque l'élément est à moins de 0 px du bas de la fenêtre.

Mauvaise interprétation du langage

L'ambiguïté vient du langage utilisé dans la documentation MDN. L'énoncé « jusqu'à ce que le seuil soit dépassé » implique que l'état relatif est l'état de départ du positionnement collant. Cependant, ce n’est pas toujours le cas. Si le seuil est déjà dépassé lorsque l'élément est déclaré collant, il démarrera à l'état fixe.

Conclusion

Comprendre les deux états de positionnement collant et quand les transitions se produire entre eux est crucial pour l’utiliser efficacement. Le comportement décrit dans la documentation MDN peut être inversé lorsque le seuil est initialement dépassé, entraînant un comportement différent de celui attendu.

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!