为什么我的粘性导航不能在嵌套元素内工作？

为什么position:sticky在嵌套元素中不起作用

使用粘性导航时，您可能会遇到粘性行为的挑战一旦导航元素包含在另一个元素中，该导航元素将无法工作。这是由于 position:sticky 的作用方式造成的。

理解position:sticky

position:sticky 定位元素相对于其正常流量。但是， position:sticky 会产生包含元素的布局。在您的场景中，父元素定义为固定高度，由 position:sticky 元素的高度确定。因此，粘性元素缺乏空间来表现粘性。

可视化问题

为了说明问题，请为父元素添加边框：

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

您会注意到粘性元素包含在父元素的固定高度内。

以上是为什么我的粘性导航不能在嵌套元素内工作？的详细内容。更多信息请关注PHP中文网其他相关文章！