ネストされたスティッキー位置決めが失敗するのはなぜですか? どうすれば修正できますか?

スティッキー配置のジレンマ: ネストすると失敗する理由

position: Sticky を指定して要素を別の要素内に配置すると、動作しなくなる可能性があります予想通り。これは、スティッキー配置では親要素のサイズが考慮されるためです。

問題の理解

提供された例では、

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

親要素(nav-wrapper) は、ナビゲーションの高さに基づいて高さを定義します。 element.

<div class="nav-wrapper">
  <nav>
    <a href="#">...</a>
    <a href="#">...</a>
  </nav>
</div>

nav の位置が Sticky の場合、ブラウザ ウィンドウの上部に固定されることが期待されます。ただし、親要素が利用可能な垂直方向のスペースをすべて占有しているため、ナビゲーションを固定する余地はありません。

問題の解決

固定機能を作成するにはこのシナリオでは、親とは独立して nav 要素に独自の高さを与えることができます。

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

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

両方の高さを設定することで、 nav-wrapper と nav を使用すると、スティッキー配置が正しく機能するために十分な垂直スペースが作成されます。

以上がネストされたスティッキー位置決めが失敗するのはなぜですか? どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。