Comment le débordement affecte-t-il le positionnement collant dans le module de mise en page positionné CSS niveau 3 ?

Boîtes de défilement dans le module de mise en page positionné CSS niveau 3

Le module de mise en page positionné CSS niveau 3 définit un positionnement collant, qui est similaire au comportement d'une boîte relativement positionnée. Cependant, le décalage est calculé par rapport à l'ancêtre le plus proche avec une boîte de défilement, ou à la fenêtre d'affichage si aucun ancêtre n'a de boîte de défilement.

Qu'est-ce qu'une boîte de défilement ?

Une boîte de défilement est une boîte où la valeur de débordement est définie sur une valeur autre que visible (la valeur par défaut). Ceci est basé sur une documentation précédente où des problèmes avec les éléments collants sont survenus en raison d'un débordement.

Effet du débordement sur le positionnement collant

Si un élément avec débordement : caché est un ancêtre d'une position : élément collant, le décalage de ce dernier sera calculé en fonction de la boîte ancêtre à débordement caché. En conséquence, le comportement de défilement sera restreint, empêchant l'élément collant d'être visible.

Exemple de code

.wrapper {
  height:200vh;
  border:2px solid;
}
.wrapper >div {
  position:sticky;
  top:0;
  height:20px;
  background:red;
}

<div class="wrapper">
  <div></div>
</div>

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!