為什麼我的黏性導航在嵌套在定位元素中時不起作用？

對嵌套元素中的「position:sticky」進行故障排除

使用「position:sticky」定義黏性功能時，您可能會遇到這樣的情況：嵌套元素內的行為變得不一致。讓我們深入研究為什麼會發生這種情況以及如何解決它。

理解問題

“position:sticky”相對於視口定位元素，創建一個“粘性” ”捲動時的效果。 「position:absolute」的「nav-wrapper」和一個「nav」 」其中包含「position:sticky」的元素。這裡的問題是父元素（“nav-wrapper”）定義了黏性元素（“nav”）的高度，沒有為父元素內發生黏性行為留下空間。

解決問題

要解決此問題，請確保父元素不會限制黏性元素的高度。這可以透過刪除固定高度或使用靈活的大小選項（例如“最小高度”或“最大高度”）來實現。

帶有可視化邊框的範例

這是一個向父元素添加邊框的範例，以方便使用視覺化：

.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中文網其他相關文章！