ネストされた要素内でスティッキー ナビゲーションが機能しないのはなぜですか?

入れ子になった要素でposition:sticky が機能しない理由

スティッキー ナビゲーションを使用する場合、スティッキーの動作が異なるという問題が発生する可能性があります。ナビゲーション要素が別の要素内に囲まれると機能しません。これは、position:sticky の機能によるものです。

position:sticky

position:sticky の位置を理解する要素の通常の流れとの相対的な関係。ただし、position:sticky は、それを含む要素のレイアウトに従属します。あなたのシナリオでは、親要素は、position:sticky 要素の高さによって決定される固定の高さで定義されます。その結果、スティッキー要素にはスティッキーに動作するためのスペースが不足します。

問題の視覚化

問題を説明するには、親要素に枠線を追加します。

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

スティッキー要素が親要素の固定高さ内に含まれていることがわかります。

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