Différence entre position: collante et position: fixe?
La documentation était assez difficile à comprendre depuis que je suis nouveau sur CSS. Alors, quelqu'un peut-il expliquer la différence réelle entre position:sticky et position:fixed? J'apprécierais également un exemple.
J'ai parcouru https://developer.mozilla.org/en-US/docs/Web/CSS/position et quelques autres articles, mais je ne comprends toujours pas.
position: fixed fixe toujours un élément à une position dans son conteneur de défilement ou la fenêtre. Peu importe la façon dont vous faites défiler son conteneur, il restera exactement dans la même position et n'affectera pas le flux d'autres éléments dans le conteneur.
Sans entrer dans les détails, position: sticky agit essentiellement comme position: relative jusqu'à ce qu'un élément défile au-delà d'un décalage spécifique, auquel cas il se transforme en position: fixed, ce qui fait que l'élément "colle" à sa position au lieu d'être déplacé hors de la vue. Il se décolle finalement au fur et à mesure qu'il défile vers sa position d'origine. Du moins, c'est ainsi que je le comprends en théorie.
La raison pour laquelle je veux éviter d'entrer dans les détails est que position: sticky est tout nouveau, expérimental (comme indiqué dans le document vers lequel vous liez), et pas encore finalisé. Même ce que j'ai dit ci-dessus pourrait bien changer dans un avenir proche. Vous ne pourrez pas utiliser position: sticky encore quand même (j'espère que cela changera au cours de la prochaine année).
Mozilla a récemment présenté son implémentation de position: stickyici . Cela vaut bien une montre.
Voir cet exemple explicite pour plus de clarté. CODEPEN
Position fixe:
Un élément à position fixe s'affiche par rapport à la fenêtre d'affichage ou à la fenêtre du navigateur elle-même. Il reste toujours au même endroit même si la page défile.
Il n'affecte pas le flux des autres éléments de la page, c'est-à-dire qu'il n'occupe aucun espace spécifique (tout comme
position: absolute).S'il est défini à l'intérieur d'un autre conteneur (div avec ou sans position relative/absolue), il est toujours positionné par rapport au navigateur et non à ce conteneur. (Ici, il diffère par
position: absolute).
Position collante:
Un élément avec une position collante est positionné en fonction de la position de défilement de l'utilisateur. Comme @ Boltclock mentionné, il agit essentiellement comme position: relative jusqu'à ce qu'un élément défile au-delà d'un décalage spécifique, auquel cas il se transforme en position: fixe. Quand il est défilé, il revient à sa position précédente (relative).
Il affecte le flux d'autres éléments de la page, c'est-à-dire qu'il occupe un espace spécifique sur la page (tout comme
position: relative).S'il est défini à l'intérieur d'un conteneur, il est positionné par rapport à ce conteneur. Si le conteneur a un débordement (scroll), selon le décalage du scroll, il se transforme en position: fixe.
Donc, si vous souhaitez obtenir la fonctionnalité fixe mais à l'intérieur d'un conteneur, utilisez le sticky.