為什麼我的黏性導航在嵌套在另一個元素中時會消失？

問題：嵌套元素時黏性位置消失

在CSS 中，您在另一個元素中定義了黏性導航，但它嵌套時無法保持其黏性行為。為什麼會發生這種情況？

解釋：

位置：sticky 計算其相對於其父元素的位置。當您將導航嵌套在另一個元素（例如 .nav-wrapper）中時，父元素決定黏性行為。

不幸的是，在您的範例中， .nav-wrapper 的高度由 Sticky 決定。導航元素。因此，父級中沒有可用空間可供 .nav 元素貼上。

解決方案：

要解決此問題，您可以新增邊框到父元素來說明問題。當您滾動時，您會注意到父級的高度與導航的高度相匹配，沒有留下黏性行為的空間。

有邊框的範例：

.nav-wrapper {
  position: absolute;
  bottom: 0;
  border: 2px solid;
}

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

body {
  min-height:200vh;
}

以上是為什麼我的黏性導航在嵌套在另一個元素中時會消失？的詳細內容。更多資訊請關注PHP中文網其他相關文章！