Qu'est-ce qui détermine une zone de défilement dans le positionnement CSS ?

Comprendre les boîtes de défilement dans le positionnement CSS

Le concept de « boîtes de défilement » a émergé dans le module de mise en page positionné CSS niveau 3 (ébauche de travail) , notamment dans le contexte d’un positionnement collant. La définition indique que le décalage d'une boîte bien positionnée est calculé par rapport à l'ancêtre le plus proche avec une boîte de défilement ou à la fenêtre si aucun ancêtre de ce type n'existe.

Définition des boîtes de défilement

Malgré l'utilisation du terme dans le projet, il manque une définition précise ailleurs dans CSS. Cependant, sur la base des informations disponibles, une boîte de défilement est considérée comme :

• Une boîte avec une valeur pour la propriété "overflow" définie sur une valeur autre que "visible" (la valeur par défaut).

Cette compréhension s'aligne sur des exemples dans lesquels des problèmes de débordement peuvent affecter le comportement des éléments collants.

Identifier les boîtes de défilement

En pratique, changer activer ou désactiver si une boîte est une boîte de défilement peut être obtenu en modifiant la propriété "overflow". Par exemple :

• Si une boîte a overflow:hidden comme parent, tous les éléments position:sticky qu'elle contient ne défileront pas, car leur décalage est calculé en fonction de la boîte masquée.
• À l'inverse, définir overflow:scroll sur une boîte ancêtre permettra à sa position:sticky descendants de défiler dans cette boîte.

Exemple

Considérez l'exemple suivant :

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

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

Dans cet exemple, le div .wrapper est une boîte de défilement en raison de overflow:scroll. Par conséquent, le div collant défilera dans le wrapper.

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!