当元素包裹在另一个元素中时，为什么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

粘性位置考虑父元素的行为。在您的情况下，父元素的高度由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>

粘性行为很好，因为父元素上有足够的高度，可以在特定阈值之后固定该元素。

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