位置決めされた要素内にネストされているときにスティッキー ナビゲーションが機能しないのはなぜですか?

ネストされた要素内の「position:sticky」のトラブルシューティング

「position:sticky」を使用してスティッキー機能を定義すると、次のような状況が発生する可能性があります。ネストされた要素内では動作が矛盾します。この問題が発生する理由とその解決方法を詳しく見てみましょう。

問題を理解する

"position:sticky" は、ビューポートを基準にして要素を配置し、"sticky" を作成します。スクロール時の効果。ただし、要素が別の位置指定された要素内にネストされている場合、「position:sticky」プロパティの動作は異なります。

この例では、「position:absolute」と「nav」を持つ「nav-wrapper」があります。 " 要素内の "position:sticky" 。ここでの問題は、親要素 (「nav-wrapper」) がスティッキー要素 (「nav」) の高さを定義しており、親要素内でスティッキー動作が発生する余地がないことです。

問題の解決

これを修正するには、親要素がスティッキー要素の高さを制限しないようにします。これは、固定高さを削除するか、「min-height」や「max-height」などの柔軟なサイズ設定オプションを使用することで実現できます。

視覚化のための境界線を使用した例

わかりやすくするために親要素に枠線を追加した例を次に示します。

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

親要素からの高さが固定されているため、ネストされた要素内でスティッキー動作が期待どおりに動作するようになります。

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