为什么当元素包裹在另一个元素中时位置：粘性不起作用？答案

【问题标题】：Why position:sticky is not working when the element is wrapped inside another one?为什么当元素包裹在另一个元素中时位置：粘性不起作用？
【发布时间】：2019-03-30 11:55:35
【问题描述】：

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

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

【问题讨论】：

我相信（但不确定）这个问题被否决了，因为它在您 4 分钟前的修订之前缺少代码。
但是我相信这个问题可以由熟悉css的人不用代码解决:)
没有没有代码可以解决的问题......问题来自特定的代码，这就是我们需要看到的代码

标签： html css sticky

【解决方案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>

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

粘性定位元素是计算位置的元素价值是粘性的。它被视为相对定位直到其 包含块超过指定阈值（例如将 top 设置为其流根（或它的容器）内的值而不是 auto 在其中滚动），此时它被视为“卡住”直到会议 其包含块的另一边。^ref