为什么我的粘性导航在嵌套在定位元素中时不起作用？

对嵌套元素中的“position:sticky”进行故障排除

使用“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中文网其他相关文章！