私の Sticky 要素が親コンテナ内で動作しないのはなぜですか?

Sticky 要素が親内で機能しない

別の要素内でネストされている場合に、position: Sticky が期待どおりに動作しないシナリオが発生する可能性があります。

この問題は、position:sticky が親要素のサイズを考慮するために発生します。親要素の高さがそのスティッキーな子によって決定される場合、子がスティッキーとなるスペースはありません。

例:

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

視覚化するための境界線問題:

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

解決策:

これを解決するには、親要素のサイズが独立して定義されていることを確認し、スティッキーな子用のスペースを残します。これは、高さまたは最小高さなどの CSS プロパティを使用して実現できます。

以上が私の Sticky 要素が親コンテナ内で動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。