別の要素内にネストするとスティッキー ナビゲーションが消えるのはなぜですか?

問題: 要素がネストされるとスティッキー位置が消える

CSS で、別の要素内にスティッキー ナビゲーションを定義しましたが、ネストされている場合、スティッキーな動作を維持できません。なぜこのようなことが起こるのでしょうか?

説明:

位置: Sticky は、親要素を基準とした位置を計算します。ナビゲーションを別の要素 (.nav-wrapper など) 内にネストすると、親要素が Sticky の動作を決定します。

残念ながら、この例では、 .nav-wrapper の高さは Sticky によって決まります。ナビ要素。その結果、親内に .nav 要素を固定するためのスペースがありません。

解決策:

この問題を解決するには、境界線を追加します。問題を説明するために親要素に追加します。スクロールすると、親の高さがナビゲーションの高さと一致し、スティッキーな動作の余地がないことがわかります。

境界線を使用した例:

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

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

body {
  min-height:200vh;
}

以上が別の要素内にネストするとスティッキー ナビゲーションが消えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。