当元素被包裹在另一个元素中时，为什么 position:sticky 不起作用？

Question

我正在试验粘性导航，但遇到了问题。问题是，当我将导航放在其他元素中时，它不再具有粘性。

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

Answer 1

position:sticky考虑父元素应有的行为。在您的情况下，父元素的高度由粘性元素定义，因此元素没有空间具有粘性行为

添加边框以更好地查看问题：

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

现在给父元素添加高度，看看发生了什么：

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

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

粘性行为工作正常，因为父元素上有足够的高度，元素可以在特定阈值后固定。

粘性定位元素是其计算出的位置值具有粘性的元素。它被看成相对定位，直到它的 包含块超过指定阈值（例如，设置顶部为比自动其它值）它的流动根内（或容器它内滚动），在该点它被视为“卡住” ，直到满足 所述其包含块的相对边缘。^参考

相关问题：

为什么底部：0 不适用于位置：粘性？

如果您为 position:sticky 指定 `bottom: 0`，为什么它会做一些与规范不同的事情？

定义“高度”时“位置：粘性”不起作用