Pourquoi mon élément Sticky ne fonctionne-t-il pas dans son conteneur parent ?

Les éléments Sticky ne fonctionnent pas au sein des parents

Vous pouvez rencontrer des scénarios dans lesquels position: sticky ne se comporte pas comme prévu lorsqu'il est imbriqué dans un autre élément.

Le problème se pose car position: sticky prend en compte la taille de l'élément parent. Si la hauteur de l'élément parent est déterminée par son enfant collant, il n'y a pas d'espace auquel l'enfant puisse s'en tenir.

Exemple :

.nav-wrapper {
  position: absolute; 
  bottom: 0;
}

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

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

Ajout d'un bordure pour visualiser le problème :

.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>

Solution :

Pour résoudre ce problème, assurez-vous que la taille de l'élément parent est définie indépendamment, laissant de l'espace pour l'enfant collant. Ceci peut être réalisé en utilisant des propriétés CSS telles que height ou min-height.

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!