为什么`overflow:hidden`阻止`position:sticky`工作？

Question

在下面的代码段中,div容器内部有一个粘性位置.它始终保持在容器内部,并粘在滚动面板的顶部.这与UITableViewiOS上的标题的行为相同,其中标题保持可见,直到下一个标题位于顶部.

在第二个片段中,除了容器具有overflow:hiddenCSS规则之外,一切都是相同的.这似乎可以防止position:sticky行为正常工作.

.parent {
  position: relative;
  background: #ccc;
  width: 500px;
  height: 150px;
  overflow: auto;
  margin-bottom: 20px;
}

.hidden-overflow {
  overflow: hidden;
}

.sticky {
  position: sticky;
  background: #333;
  text-align: center;
  color: #fff;
  top: 10px;
}

<div class="parent">
  <div>
    <div class="sticky">
      Hi, I am a sticky inside the container which contains the first paragraph.
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
    </p>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat
    nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
  </p>
  <p>
    Integer congue augue a quam tincidunt, vitae dictum sem iaculis. Proin feugiat nibh vitae leo facilisis, eget laoreet augue dictum. Nunc facilisis tempor feugiat. Aenean eget interdum diam. Maecenas non risus iaculis, scelerisque ipsum eu, facilisis urna.
    Integer velit justo, vestibulum vel vulputate vel, bibendum eu lorem. Phasellus viverra nisl a mi pretium eleifend.
  </p>
</div>
<div class="parent">
  <div class="hidden-overflow">
    <div class="sticky">
      Hi, I am another sticky in the container which contains the first paragraph, but my container has overflow:hidden.
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
    </p>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat
    nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
  </p>
  <p>
    Integer congue augue a quam tincidunt, vitae dictum sem iaculis. Proin feugiat nibh vitae leo facilisis, eget laoreet augue dictum. Nunc facilisis tempor feugiat. Aenean eget interdum diam. Maecenas non risus iaculis, scelerisque ipsum eu, facilisis urna.
    Integer velit justo, vestibulum vel vulputate vel, bibendum eu lorem. Phasellus viverra nisl a mi pretium eleifend.
  </p>
</div>

_{(片段改编自丹尼尔@的位置)}

为什么不在position:sticky容器中工作overflow:hidden？

Answer 1

自从这个问题最初发布以来已经有几年了，现在有另一种方法来隐藏溢出的内容：

contain: paint;

https://developer.mozilla.org/en-US/docs/Web/CSS/contain

Answer 2

overflow: hidden并没有阻止position: sticky工作.但是如果设置overflow为hidden粘性元素的任何祖先,则此祖先元素将是粘性元素的滚动容器.如果您overflow将祖先的值从中切换hidden到scroll并滚动此祖先(而不是窗口),那么您可以看到粘性仍然有效.

另请参见https://github.com/wilddeer/stickyfill#pro-tips:

任何前驱元素上的overflow,overflow-x或overflow-y的任何非默认值(不可见)都将sticky粘贴到该前任的溢出上下文中.简单来说,滚动前一个将导致粘贴,滚动窗口不会.这是溢出的预期:自动和溢出:滚动,但经常导致问题和溢出混淆:隐藏.

或者http://www.coreyford.name/files/position-sticky-presentation/:

框的位置取决于其包含块(建立为position:static)以及其滚动容器,由同一文档中最近的祖先定义,其中'overflow-x'或'overflow-y'的计算值除外'visible',或视口,如果不存在这样的祖先.

或CSS定位布局模块3级W3C工作草案:

粘性定位的盒子与相对定位的盒子类似地定位,但是偏移是参考具有滚动框的最近祖先计算的,或者如果没有祖先具有滚动框则计算视口.

Answer 3

我遇到了这个问题并找到了替代解决方案，使用而overflow: clip不是overflow: hidden. 据我所知，它们的工作方式几乎相同，只是粘性元素的锚点在使用时不受影响clip。唯一的问题是，截至 2022 年 11 月，overflow: clip浏览器支持有限（~80%）： https: //caniuse.com/mdn-css_properties_overflow_clip

Answer 4

我不确定这在所有情况下都有效，但我遇到了这个问题，并且能够通过替换overflow: hidden;为clip-paths来解决这个问题。

.parent {
    /*overflow: hidden; removed */
    position: absolute; /*this is required for clip-paths to work*/
    -webkit-clip-path: inset(0); /* safari*/
    clip-path: inset(0);
    clip: rect(0px, auto, auto, 0px); /* IE11/Edge (not that IE11 supports sticky anyway!) */
}

至于必须添加绝对位置，将溢出：隐藏元素包装在另一个位置：相对元素，然后添加顶部，底部，左侧和右侧：0；应该让它填满它的父容器。