Quand dois-je utiliser Position : Sticky ou Position : Fixe ?

Dévoiler la distinction entre position:sticky et position:fixed

Comprendre les nuances entre les propriétés de positionnement CSS peut être déroutant pour les débutants. Cet article explore les différences subtiles entre position:sticky et position:fixed, clarifiant leurs fonctionnalités distinctes pour améliorer vos prouesses CSS.

position:fixed vs. position:sticky

position:fixed

• Verrouille un élément à une position spécifique dans son conteneur ou dans la fenêtre.
• Reste fixe quel que soit le défilement du conteneur.

position:sticky

• Se comporte initialement comme position:relative, ce qui n'affecte pas le flux des éléments.
• Lors du défilement au-delà d'un décalage spécifié , passe à position:fixed, "collant" l'élément à sa position.
• Revient à position:relative lorsqu'il revient vers sa position initiale.

Exemple

Considérez le code HTML et CSS suivant :

<code class="html"><div class="container">
  <div class="sticky-element">Sticky Element</div>
  <div class="fixed-element">Fixed Element</div>
</div></code>

<code class="css">.container {
  height: 100vh; /* Set the container to full viewport height */
  overflow-y: scroll; /* Enable vertical scrolling within the container */
}

.sticky-element {
  position: sticky;
  top: 10px; /* Specifies the offset from the top before stickiness applies */
  width: 200px;
  height: 200px;
  background-color: blue;
}

.fixed-element {
  position: fixed;
  top: 0; /* Sets the fixed position from the top of the viewport */
  width: 200px;
  height: 200px;
  background-color: red;
}</code>

Comportement :

Lorsqu'il défile, l'élément collant reste en place jusqu'à ce que il atteint le haut de la fenêtre, auquel cas il colle au sommet comme un élément fixe. L'élément fixe, quant à lui, reste collé à sa position initiale, quel que soit le défilement du conteneur.

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!