为什么当元素被包裹在另一个元素中时 position:sticky 不起作用? [英] Why position:sticky is not working when the element is wrapped inside another one?

问题描述

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

.nav-wrapper{位置:绝对；底部:0；}.nav-wrapper 导航{位置:粘性；顶部:0；}

 
<导航><a href="#"><li>首页</li></a><a href="#"><li>关于</li></a></nav>

解决方案

position:sticky 考虑父元素的行为.在您的情况下，父元素的高度由粘性元素定义，因此元素没有粘性行为的空间

添加边框以更好地查看问题:

.nav-wrapper {位置:绝对；底部:0；边框:2px 实心；}.nav-包装器导航{位置:粘性；顶部:0；}身体 {最小高度:200vh；}

<导航><a href="#"><li>首页</li></a><a href="#"><li>关于</li></a></nav>

现在给父元素添加高度，看看发生了什么:

.nav-wrapper {位置:绝对；底部:0；边框:2px 实心；高度:80vh；}.nav-包装器导航{位置:粘性；顶部:0；}身体 {最小高度:200vh；}

<导航><a href="#"><li>首页</li></a><a href="#"><li>关于</li></a></nav>

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

<块引用>

粘性定位元素是其计算位置的元素价值是粘性的.它被视为相对定位直到它包含块超过指定的阈值(例如将顶部设置为auto 以外的值)在其流根(或它的容器)中滚动)，此时它被视为卡住".直到见面其包含块的对边.^参考

相关问题:

为什么 bottom:0 不适用于 position:sticky?

如果您为 position:sticky 指定 `bottom: 0`，为什么它做的事情与规范不同?

定义高度"时，位置:粘性"不起作用

I am experimenting with sticky nav and I ran into problem. Problem is that when I put the nav in other element it's not anymore sticky.

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

解决方案

position:sticky consider the parent element to behave as it should be. In your case the parent element has its height defined by the sticky element so there is no room for the element to have a sticky behavior

Add border to better see the issue:

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

Now add height to the parent element and see what is happening:

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

The sticky behavior is working fine because there is enough height on the parent element where the element can be fixed after a specific threshold.

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

Related questions:

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

这篇关于为什么当元素被包裹在另一个元素中时 position:sticky 不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！