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




 .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的人就可以解决此问题：)
没有代码是没有问题可以解决的……问题源于我们需要查看代码的特定代码

#1 楼

position:sticky考虑父元素的行为应有的表现。在您的情况下，父元素的高度由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