La différence entre la position:collant et position:fixe?

La documentation a été assez difficile à comprendre car je suis nouveau sur le CSS. Si quelqu'un peut expliquer la différence réelle entre les position:sticky et position:fixed? J'apprécierais aussi un exemple.

Je suis passé par https://developer.mozilla.org/en-US/docs/Web/CSS/position et quelques autres articles, mais je ne comprends toujours pas.

InformationsquelleAutor | 2013-10-21
  1. 26

    position: fixed toujours se fixe un élément à une position au sein de son défilement du conteneur ou de la fenêtre d'affichage. Peu importe la façon dont vous faites défiler son conteneur, il restera dans la même position, et de ne pas affecter le flux de d'autres éléments dans le conteneur.

    Sans entrer dans les détails spécifiques, position: sticky agit fondamentalement comme position: relative jusqu'à ce qu'un élément de défile-delà d'un certain décalage, auquel cas il se transforme en position: fixed, provoquant l'élément de "coller" à sa position au lieu de défilement de la vue. Il finit par décoller comme il défile en arrière vers sa position d'origine. Au moins, c'est comment je le comprends en théorie.

    La raison pour laquelle je veux éviter d'entrer dans les détails, c'est parce que position: sticky est la marque de nouvelles, expérimentales (comme indiqué dans le document en lien), et pas encore finalisé. Même ce que j'ai énoncé ci-dessus peut bien changer dans un avenir proche. Vous ne serez pas en mesure d'utiliser position: sticky encore de toute façon (j'espère que cela va changer au cours de la prochaine année).

    Mozilla a récemment présenté son de la mise en œuvre de position: sticky ici. C'est très vaut la peine de regarder.

    • Je suis à l'aide d'assemblage:des collants, et au début, il fonctionne très bien... va relative apparence fixe. Mais sur une longue page, finalement quand je scroll vers le bas assez longtemps, le collant en-tête disparaît comme d'autres objets de page.
    • Collant a l'air très cool et pratique. Espérons qu'il sera mis en œuvre à tous les navigateurs bientôt. J'ai vu cet effet dans certains sites web, mais est créé avec javascript. avec collant, il peut réduire la quantité de code et de la complexité.
    InformationsquelleAutor BoltClock
  2. 18

    Voir cette auto-explicatif exemple pour plus de clarté. CODEPEN

    Position Fixe:

    1. Un élément avec position fixe est affichée à l'égard de la fenêtre ou la fenêtre du navigateur lui-même. Il reste toujours au même endroit, même si la page défile.

    2. Il n'a pas d'effet sur le flux des autres éléments dans la page ie n'occupe pas tout l'espace(tout comme position: absolute).

    3. Si elle est définie à l'intérieur de certains autres conteneurs (div avec ou sans parent/position absolue), il est toujours positionné à l'égard du navigateur et pas que le conteneur. (Ici, il se distingue avec position: absolute).

    Collant Position:

    1. Un élément collant position est positionné en fonction de la position de défilement. Comme @Boltclock mentionné, il agit comme position: relative jusqu'à ce qu'un élément de défile-delà d'un certain décalage, auquel cas il se transforme en position: fixed. Quand il défile en arrière il sera de retour à son précédente (relative) de la position.

    2. Il les effets de la circulation des autres éléments dans la page ie occupe un certain espace sur la page(tout comme position: relative).

    3. Si elle est définie à l'intérieur de certaines conteneur, il est positionné à l'égard de ce conteneur. Si le conteneur a quelques débordement(défilement), en fonction du défilement de décalage, il se transforme en position:fixed.

    Donc, si vous voulez atteindre le fixe, les fonctionnalités, mais à l'intérieur d'un conteneur, utilisez collante.

    InformationsquelleAutor Pransh Tiwari