Pourquoi ma navigation collante ne fonctionne-t-elle pas lorsqu'elle est imbriquée dans un élément positionné ?

Dépannage de « position:sticky » dans les éléments imbriqués

Lors de la définition de la fonctionnalité collante avec « position:sticky », vous pouvez rencontrer des situations où le le comportement devient incohérent au sein des éléments imbriqués. Voyons pourquoi cela se produit et comment le résoudre.

Comprendre le problème

"position:sticky" positionne un élément par rapport à la fenêtre, créant ainsi un "sticky " effet lors du défilement. Cependant, lorsqu'un élément est imbriqué dans un autre élément positionné, la propriété "position:sticky" se comporte différemment.

Dans votre exemple, vous avez un "nav-wrapper" avec "position:absolute" et un "nav " élément à l'intérieur avec "position: sticky." Le problème ici est que l'élément parent ("nav-wrapper") définit la hauteur de l'élément collant ("nav"), ne laissant aucune place au comportement collant à l'intérieur de l'élément parent.

Résoudre le problème

Pour résoudre ce problème, assurez-vous que l'élément parent ne contraint pas la hauteur de l'élément collant. Ceci peut être réalisé en supprimant la hauteur fixe ou en utilisant des options de dimensionnement flexibles telles que « hauteur minimale » ou « hauteur maximale ».

Exemple avec bordure pour la visualisation

Voici un exemple avec une bordure ajoutée à l'élément parent pour une visualisation plus facile :

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

.nav-wrapper nav {
  position: sticky;
  top: 0;
}

body {
  min-height: 200vh;
}

<div class="nav-wrapper">
  <nav>
    <a href="#">
      <li>Home</li>
    </a>
    <a href="#">
      <li>About</li>
    </a>
  </nav>
</div>

En supprimant la hauteur fixe de l'élément parent, le comportement collant fonctionnera désormais comme prévu dans l'élément imbriqué.

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!