Rester fidèle à cela - Dépannage du positionnement collant CSS-tutoriel CSS-php.cn

Écrit par Ibadehin Mojeed✏️

Vous travaillez pendant des jours, voire des mois, pour créer une page Web élégante. Tout a l'air bien au début, mais ensuite vous commencez à faire défiler… et tout à coup, vos éléments collants (menus de navigation, en-têtes ou appels à l'action de la barre latérale) ne collent pas du tout ou ne restent pas là où ils sont censés le faire.

Frustrant, non ?

Ce qui peut sembler être un bug mineur au premier abord peut rapidement devenir un véritable casse-tête, et s'il n'est pas résolu, peut nuire considérablement à l'engagement de votre site.

Dans ce guide, nous aborderons les problèmes de positionnement les plus courants :

Aucun décalage spécifié
Élément collant à l'intérieur des conteneurs flexibles/grillés
Hauteur du conteneur de l'élément collant
L'ancêtre a une propriété de débordement
débordement sur l'élément corps

Ensuite, nous expliquerons comment résoudre ces problèmes de positionnement collant avec des exemples pratiques et des conseils pour faire de vous un professionnel du positionnement collant ! Vous pouvez également trouver un aperçu de la propriété position et de la position collante CSS après avoir parcouru les problèmes courants.

Aucun décalage spécifié

La première et la plus simple étape de dépannage consiste à s'assurer qu'un décalage est spécifié à l'aide de propriétés telles que haut, droite, bas ou gauche :

.sticky-heading {
  position: sticky;
  top: 0; /* Offset not defined - sticky behavior won't activate */
}

Copier après la connexion

Sans décalage, le comportement collant ne s'activera pas. De plus, assurez-vous que le décalage appliqué est approprié à la direction de défilement prévue. Par exemple, haut ou bas pour le défilement vertical et gauche ou droite pour le défilement horizontal.

Élément collant à l'intérieur des conteneurs flexibles/grillés

Le CodePen ci-dessous montre des éléments collants à l'intérieur de conteneurs en grille :

Voir l'élément Pen Sticky à l'intérieur des conteneurs de grille par Ibaslogic (@ibaslogic) sur CodePen.

Dans le CodePen, les titres restent car le conteneur contenant chacun d'eux dispose de suffisamment d'espace de défilement. Pour mieux visualiser la mise en page, essayez d'ajouter des bordures autour du contenu. Cela vous aidera à voir comment chaque titre reste en place lorsque vous faites défiler les sections.

Getting sticky with it — Troubleshooting CSS sticky positioning

Dans le code HTML, les titres sont placés dans des conteneurs de grille et les éléments de grille s'étirent naturellement pour remplir l'espace disponible. Cependant, cet étirement peut empêcher un élément collant d'avoir suffisamment de place pour défiler et coller.

Pour résoudre ce problème, nous avons appliqué align-items: start au conteneur de grille. Cela empêche l'élément collant de s'étirer, garantissant ainsi qu'il dispose de suffisamment d'espace pour fonctionner comme prévu :

.sticky-heading {
  position: sticky;
  top: 0; /* Offset not defined - sticky behavior won't activate */
}

Copier après la connexion

Sans align-items: start, le conteneur de grille étirerait le titre pour remplir l'espace disponible, empêchant l'élément de coller au haut de la fenêtre. Cela se produit car il n'y aurait pas suffisamment d'espace de défilement pour que l'élément soit correctement attaché, comme illustré ci-dessous :

Getting sticky with it — Troubleshooting CSS sticky positioning

Bien que l'exemple montre l'implémentation de la grille, la même solution s'applique également aux mises en page flexbox.

Hauteur du conteneur de l'élément collant

Lorsque vous interagissez avec le CodePen ci-dessous et faites défiler la fenêtre pour observer le comportement collant, vous remarquerez que le premier élément collant ne fonctionne pas comme prévu, tandis que le second fonctionne correctement, même si les mises en page semblent visuellement similaires. :

Comme mentionné précédemment, pour que l'élément collant fonctionne correctement, son conteneur doit avoir suffisamment de hauteur ou d'espace de défilement. Regardons de plus près les conteneurs. Dans la première mise en page, l'élément collant est enfermé dans un

supplémentaire :

article {
  align-items: start;
  /* ... */
}

Copier après la connexion

Dans le CodePen ci-dessous, vous pouvez faire défiler la section pour observer comment les titres collants restent désormais dans la section elle-même. Une bordure a été ajoutée pour visualiser la zone déroulante :

débordement sur l'élément corps

Définir le débordement sur l'élément body ne rompt généralement pas le positionnement collant comme cela pourrait être le cas avec d'autres éléments ancêtres :

<corps>



<p>En effet, le corps crée le contexte de défilement principal pour la page entière et les éléments collants restent collés par rapport à la fenêtre d'affichage dans ce cas :</p>

<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVzBJx?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<p>Même si un mécanisme de défilement est créé, il n'interfère pas avec le comportement collant comme il le ferait dans des conteneurs plus petits, sauf lors de la définition de overflow: Hidden, qui supprime la possibilité de faire défiler tout contenu dépassant la fenêtre d'affichage. </p>

<p>Maintenant que nous avons couvert les problèmes persistants courants, vous pouvez lire un aperçu plus général de la propriété position et de la position collante.</p><h2>
  
  
  Un bref aperçu de la propriété position
</h2>

<p>La propriété CSS position contrôle la façon dont les éléments sont positionnés sur une page Web. Avec des valeurs telles que relative, absolue, fixe ou collante, vous pouvez ajuster le placement d'un élément à l'aide des propriétés haut, droite, bas et gauche dans son bloc conteneur ou dans la fenêtre. Ces valeurs permettent également de positionner les éléments les uns par rapport aux autres à l'aide du z-index. </p>

<p>Cependant, gardez à l'esprit que ces propriétés de décalage (c'est-à-dire haut, droite, bas, gauche) et z-index ne s'appliquent pas aux éléments avec le positionnement statique par défaut. </p>

<p>Lorsqu’il s’agit de dépanner le positionnement collant, il est utile de revoir ce qu’implique la valeur collante. Comprendre son comportement fournira une image plus claire des problèmes courants et de la manière de les résoudre efficacement.</p>

<h2>
  
  
  La position collante CSS
</h2>

<p>Lorsque vous appliquez position: sticky à un élément, il se comporte de la même manière qu'un élément relativement positionné en conservant sa place dans le flux documentaire. Cependant, il acquiert également la capacité de devenir « collant » et de répondre au défilement. </p>

<p>Si vous définissez un décalage, tel que top: 10px, l'élément restera fidèle à cette position lorsque vous faites défiler vers le bas, se comportant comme s'il utilisait position:fixe. Pour le défilement horizontal, vous pouvez utiliser des décalages comme gauche ou droite pour obtenir un effet similaire. Il est important de noter que le comportement collant ne s’applique qu’au sein du bloc conteneur de l’élément. Une fois que vous avez dépassé les limites de ce bloc, l’élément collant défilera comme n’importe quel élément normal. </p>

<p>Le CodePen ci-dessous démontre le comportement collant. Faites défiler la fenêtre pour voir les titres collants en action :</p>

<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVKrrq?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<p>Chaque en-tête HTML est stylisé avec position : sticky et top : 0, garantissant qu'il colle en haut de la fenêtre lorsque vous faites défiler le contenu. Toutefois, les titres collants restent cantonnés à leurs sections respectives. Une fois que le contenu d'une section a entièrement défilé, son titre monte, permettant au titre suivant de rester en place. Cela démontre que les éléments collants ne s'échappent pas de leur conteneur parent.</p>

<h2>
  
  
  Conclusion
</h2>

<p>Créer une page Web peut être frustrant lorsque les éléments persistants ne fonctionnent pas comme prévu. Cependant, comprendre les facteurs clés tels que les propriétés de débordement des ancêtres et la hauteur des conteneurs parents peut vous aider à résoudre les problèmes de positionnement délicats. </p>

<p>Grâce aux exemples et aux conseils de ce guide, vous serez en mesure de garantir que la navigation persistante, les en-têtes et les appels à l'action de la barre latérale fonctionnent correctement. Si vous avez trouvé ce guide utile, n'hésitez pas à le partager en ligne. Et si vous avez des questions ou des contributions, rejoignez-moi dans la section commentaires !</p><hr>

<h2>
  
  
  Votre interface monopolise-t-elle le processeur de vos utilisateurs ?
</h2>

<p>À mesure que les interfaces Web deviennent de plus en plus complexes, les fonctionnalités gourmandes en ressources exigent de plus en plus du navigateur. Si vous souhaitez surveiller et suivre l'utilisation du processeur côté client, l'utilisation de la mémoire et bien plus encore pour tous vos utilisateurs en production, essayez LogRocket.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173266096142897.jpg" alt="Getting sticky with it — Troubleshooting CSS sticky positioning"></p>

<p>LogRocket est comme un DVR pour les applications Web et mobiles, enregistrant tout ce qui se passe dans votre application Web, votre application mobile ou votre site Web. Au lieu de deviner pourquoi les problèmes surviennent, vous pouvez regrouper et créer des rapports sur les principales mesures de performances du front-end, relire les sessions utilisateur avec l'état de l'application, enregistrer les requêtes réseau et faire apparaître automatiquement toutes les erreurs.</p>

<p>Modernisez la façon dont vous déboguez les applications Web et mobiles : démarrez la surveillance gratuitement.</p>

Copier après la connexion

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!