為什麼我的黏性導航不能在嵌套元素內工作？

為什麼position:sticky在嵌套元素中不起作用

使用粘性導航時，您可能會遇到粘性行為的挑戰一旦導航元素包含在另一個元素中，該導航元素將無法運作。這是由於 position:sticky 的作用方式所造成的。

理解position:sticky

position:sticky 定位元素相對於其正常流量。但是， position:sticky 會產生包含元素的佈局。在您的場景中，父元素定義為固定高度，由 position:sticky 元素的高度決定。因此，黏性元素缺乏空間來表現黏性。

視覺化問題

為了說明問題，請為父元素加上邊框：

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

您會注意到黏性元素包含在父元素的固定高度內。

以上是為什麼我的黏性導航不能在嵌套元素內工作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！