为什么我的粘性元素不能在其父容器内工作？

粘性元素在父元素中不起作用

您可能会遇到这样的情况：position: Sticky 嵌套在另一个元素中时无法按预期运行。

出现这个问题是因为position:sticky考虑了父元素的大小。如果父元素的高度由其粘性子元素决定，则子元素没有空间可以粘住。

示例：

.nav-wrapper {
  position: absolute; 
  bottom: 0;
}

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

<div class="nav-wrapper">
  <nav>
    <a href="#"><li>Home</li></a>
    <a href="#"><li>About</li></a>
  </nav>
</div>

添加边框以可视化问题：

.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>

解决方案：

要解决此问题，请确保父元素独立定义其大小，为粘性子元素留出空间。这可以使用 height 或 min-height 等 CSS 属性来实现。

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