Pourquoi ma navigation collante ne fonctionne-t-elle pas dans un élément imbriqué ?

Pourquoi position:sticky ne fonctionne pas dans un élément imbriqué

Lorsque vous utilisez la navigation collante, vous pouvez rencontrer un défi où le comportement collant ne fonctionne pas une fois que l'élément de navigation est enfermé dans un autre élément. Cela est dû à la façon dont position:sticky fonctionne.

Comprendre position:sticky

position:sticky positionne un élément par rapport à son écoulement normal. Cependant, position:sticky cède à la disposition de l'élément conteneur. Dans votre scénario, l'élément parent est défini avec une hauteur fixe, déterminée par la hauteur de l'élément position:sticky. En conséquence, l'élément collant manque d'espace pour se comporter de manière collante.

Visualisation du problème

Pour illustrer le problème, ajoutez une bordure à l'élément parent :

.nav-wrapper {
  position: absolute;
  bottom: 0;
  border: 2px solid;
}

Vous remarquerez que l'élément collant est contenu dans la hauteur fixe de l'élément parent.

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!