html - 为什么位置:sticky is not working when the element is wrapped inside another one?

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>

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

A stickily positioned element is an element whose computed positionvalue is sticky. It's treated as relatively positioned until itscontaining block crosses a specified threshold (such as setting top tovalue other than auto) within its flow root (or the container itscrolls within), at which point it is treated as "stuck" until meetingthe opposite edge of its containing block.^ref

相关问题:

Why bottom:0 doesn't work with position:sticky?

If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?

'position: sticky' not working when 'height' is defined