为什么我的粘性导航在嵌套在另一个元素中时会消失？

问题：嵌套元素时粘性位置消失

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