Pourquoi le positionnement collant se comporte-t-il différemment de ce que décrit la documentation MDN ?

Examen de l'écart dans le comportement de la position collante

La documentation MDN décrit le positionnement collant comme un attribut qui fait passer les éléments d'un placement relatif à un placement fixe une fois un seuil défini est dépassé. Cependant, dans la pratique, le comportement est différent. Cet écart provient d'une mauvaise compréhension de l'ordre dans lequel ces états sont implémentés.

Selon MDN, les éléments de position collants se comportent initialement comme des éléments de position relative jusqu'à ce que le seuil soit dépassé. Cependant, dans le contexte où bottom:0 est spécifié, le seuil est déjà dépassé dans l'état initial. En conséquence, l'élément entre directement dans son emplacement fixe et reste tel jusqu'à ce que la position de l'élément dépasse 0 px à partir du bas de la fenêtre.

Comprendre les états de position collants

Position : sticky a deux états distincts :

1. État relatif : L'élément se comporte comme un objet relativement positionné.
2. État fixe : L'élément adhère à une position fixe par rapport à la fenêtre.

L'état initial est déterminé par l'emplacement de l'élément et le seuil défini. Dans le cas de bottom:0, le seuil est immédiatement dépassé, conduisant à un état initial fixe. Au fur et à mesure que la fenêtre défile, l'élément restera fixe jusqu'à ce que la distance depuis le bord inférieur devienne supérieure à 0 px. À ce stade, il revient à son état relatif.

Illustrer le comportement

Considérez l'extrait de code suivant :

body {
  height:150vh;
  margin:0;
  display:flex;
  flex-direction:column;
  border:2px solid;
  margin:50px;
}

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

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

<div class="a"> 
  I will start relative then I will be fixed
</div>
<div class="b"> 
  I will start fixed then I will be relative
</div>

L'élément A, avec top:0, se comportera initialement comme relatif et deviendra fixe lorsqu'il atteindra le haut de la fenêtre. L'élément B, avec bottom:0, commencera immédiatement dans une position fixe et passera à la position relative lorsque la distance depuis le bas de la fenêtre dépasse 0px.

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!