Pourquoi ma navigation collante disparaît-elle lorsqu'elle est imbriquée dans un autre élément ?

Problème : la position collante disparaît lorsque l'élément est imbriqué

Dans votre CSS, vous avez défini une navigation collante dans un autre élément, mais elle ne parvient pas à maintenir son comportement collant lorsqu'il est imbriqué. Pourquoi cela se produit-il ?

Explication :

Position : sticky calcule sa position par rapport à son élément parent. Lorsque vous imbriquez la navigation dans un autre élément (par exemple, .nav-wrapper), l'élément parent détermine le comportement collant.

Malheureusement, dans votre exemple, le .nav-wrapper a sa hauteur déterminée par le sticky . élément de navigation. Par conséquent, il n'y a pas d'espace disponible dans le parent pour que l'élément .nav puisse y adhérer.

Solution :

Pour résoudre ce problème, vous pouvez ajouter une bordure à l'élément parent pour illustrer le problème. Au fur et à mesure que vous faites défiler, vous remarquerez que la hauteur du parent correspond à la hauteur de la navigation, ne laissant aucune place à un comportement collant.

Exemple avec Border :

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

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

body {
  min-height:200vh;
}

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!