La documentation était assez difficile à comprendre car je suis nouveau en CSS. Est-ce que quelqu'un pourrait s'il vous plaît expliquer la différence réelle entre position:sticky et position:fixed? Je serais également reconnaissant pour un exemple.
J'ai consulté 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 certaine position dans son conteneur de défilement ou dans le viewport. Peu importe comment vous faites défiler son conteneur, il restera exactement à la même position et n'affectera pas le flux des autres éléments dans le conteneur.
Sans rentrer dans les détails spécifiques, position: sticky agit essentiellement comme position: relative jusqu'à ce qu'un élément soit fait défiler au-delà d'un décalage spécifique, auquel cas il se transforme en position: fixed, ce qui provoque que l'élément "colle" à sa position au lieu d'être fait défiler hors de la vue. Il se détache finalement lorsqu'il est fait défiler de nouveau 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 auquel vous faites référence), et n'est pas encore finalisé. Même ce que j'ai indiqué ci-dessus pourrait bien changer dans un avenir proche. Vous ne pourrez de toute façon pas encore utiliser position: sticky (espérons que cela changera dans l'année à venir).
Mozilla a récemment présenté son implémentation de position: sticky ici. Cela vaut vraiment la peine d'y jeter un œil.
Consultez cet exemple explicatif pour une meilleure clarté. CODEPEN
Position Fixe :
Un élément avec une position fixe est affiché par rapport à l'affichage ou à la fenêtre du navigateur lui-même. Il reste toujours au même endroit même si la page est défilée.
Cela 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: absolue).
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, cela diffère de position: absolue).
Position Collante :
Un élément avec une position collante est positionné en fonction de la position de défilement de l'utilisateur. Comme @Boltclock l'a mentionné, cela agit essentiellement comme position: relative jusqu'à ce qu'un élément soit défilé au-delà d'un décalage spécifique, auquel cas il se transforme en position: fixe. Lorsqu'il est défilé en arrière, il revient à sa position précédente (relative).
Cela affecte le flux des 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 (défilement), en fonction du décalage de défilement, il se transforme en position: fixe.
Donc, si vous voulez obtenir la fonctionnalité fixe mais à l'intérieur d'un conteneur, utilisez collant.
Laissez-moi le rendre extrêmement simple.
position fixe ne occupera aucun espace dans le corps, donc l'élément suivant (par exemple : une image) sera derrière l'élément fixe.
position sticky occupe l'espace, donc l'élément suivant ne sera pas caché derrière.
L'image suivante est fixée une partie de l'image est cachée derrière la barre de navigation, parce que l'élément fixe ne occupe pas d'espace. Vous pouvez résoudre ce problème en ajoutant une marge ou en utilisant les pseudo-classes before/after.
Cet exemple concerne la position sticky. Ici l'image est entièrement visible, rien n'est caché derrière la barre de navigation car les éléments collants occupent de l'espace dans le document. 
Supposons que vous avez une barre de navigation en haut de votre site Web et que vous voulez qu'elle soit fixe afin qu'elle reste visible lorsque vous faites défiler la page.
Si vous lui donnez position: fixed;, alors le contenu de la page en haut sera caché sous la barre de navigation. En revanche, si vous décidez de lui donner position: sticky; top: 0;, la barre de navigation restera dans le flux du document et poussera gracieusement le contenu en dessous, de sorte qu'aucun contenu ne soit caché.
Lorsque vous appliquez position: fixed;, la barre de navigation s'échappe du flux normal du document, de la même manière que lorsque vous float un élément.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
