為什麼嵌套黏性定位失敗，如何修復？-css教學-PHP中文網

為什麼嵌套黏性定位失敗，如何修復？

Patricia Arquette

發布： 2024-12-21 04:07:10

原創

669 人瀏覽過

Why Does Nested Sticky Positioning Fail, and How Can I Fix It?

黏性定位困境：為什麼它在嵌套時失敗

將具有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-wrapper {
  position: absolute;
  bottom: 0;
  height: 50px;
}

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

登入後複製

透過設定兩者的高度通過nav-wrapper 和nav，您可以創建足夠的垂直空間，以便黏性定位能夠正常運作。

以上是為什麼嵌套黏性定位失敗，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！