为什么在元素嵌套另一个元素时，position:sticky无法正常工作？

Question

为什么在元素嵌套另一个元素时，position:sticky无法正常工作？

4

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

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

- Kristers Dzintars

我相信（但不确定）在你4分钟前的修订之前，该问题因缺乏代码而被投票降低了。 - jww

但我相信，熟悉 CSS 的人可以在不编写代码的情况下解决这个问题 :) - Kristers Dzintars

没有哪个问题是无需代码就能解决的……问题源于特定的代码，我们需要看到这段代码。 - Temani Afif

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

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>

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

粘性定位指的是：一个元素的计算位置属性为 sticky。在其流动根元素（或滚动容器）内部时，它被视为相对定位，直到其所属块级元素跨过指定阈值（例如将 top 设置为非 auto 值），此时它被视为"固定"，直到达到其包含块边缘的相反侧。^ref