Quelles sont les caractéristiques de la propriété position: sticky que vous connaissez?

position: sticky – c'est un hybride entre position: relative et position: fixed.

• Comportement par défaut : L'élément se comporte comme avec position: relative, restant dans le flux normal du document.
• Lors du défilement : Lorsque l'élément atteint un décalage défini (par exemple, top: 0) par rapport à son conteneur de défilement ou à la zone de visualisation (viewport), il "colle" et se comporte comme avec position: fixed, restant visible à cette position lors du défilement.
• Décalage : Le décalage est défini par les propriétés top, right, bottom, left. Il faut utiliser au moins une de ces propriétés pour que sticky fonctionne correctement.
• Conteneur de défilement (scroll container/containing block) : L'élément "colle" dans les limites de son bloc de formatage parent (containing block), qui correspond généralement à l'ancêtre le plus proche ayant une capacité de défilement ou un contexte de formatage défini. Si seul le body/html défile, le collage sera relatif à la zone de visualisation.
• Superposition : L'élément "collant" peut superposer le contenu en dessous, comme un élément avec position: fixed.
• Z-index : Le comportement en superposition est influencé par la propriété z-index.
• Restrictions :
  • Ne fonctionne pas si l'élément parent a overflow: hidden, overflow: auto ou overflow: scroll, qui coupent le contenu.
  • L'élément peut "se décoller" s'il atteint le bord de son conteneur de défilement.
• Utilisation : Fréquemment utilisé pour créer des en-têtes "collants" dans des tableaux, des panneaux de navigation ou des éléments latéraux qui restent visibles lors du défilement du contenu principal.

/* Exemple d'utilisation */
.sticky-header {
  position: sticky;
  top: 0; /* Se colle en haut du viewport ou du conteneur */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Assure que l'en-tête soit au-dessus d'autres contenus */
}