Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

_{（摘自@ Daniel＆＃39; s here的片段）}

为什么position:sticky overflow:hidden在if(previous == current) cout << "repeated word: " << current << endl; previous = current;的容器中工作？

Answer 1

overflow: hidden并未阻止position: sticky工作。但是如果你在粘性元素的任何祖先上设置overflow到hidden，那么这个祖先元素将是粘性元素的滚动容器。如果您将祖先的overflow值从hidden切换到scroll并滚动此祖先（而不是窗口），那么您可以看到粘性仍然有效。

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

溢出，溢出-x或的任何非默认值（不可见） overflow-y在任何前导元素上锚定粘贴到这个前任的溢出背景。简单来说，滚动前一个将导致粘贴，滚动窗口将不会。这是溢出的预期：自动和溢出：滚动，但往往会导致问题和溢出混淆：隐藏。

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

框的位置取决于其包含的块（建立时间为 position：static）以及由其定义的滚动容器 具有计算值的同一文档中最近的祖先 'overflow-x'或'overflow-y'而不是'visible'，或者视口if 没有这样的祖先存在。

或CSS Positioned Layout Module Level 3 W3C Working Draft：

粘性定位盒的位置与相对位置相似定位框，但偏移量是参考的计算的带滚动框的最近祖先，如果没有祖先，则为视口有一个滚动框。

Answer 2

我不确定这是否在所有情况下都能奏效，但我对此表示反对，并且可以通过将Traceback (most recent call last): File "c:\Users\H\.vscode\extensions\ms-python.python-2019.4.11987\pythonFiles\ptvsd_launcher.py", line 43, in <module> main(ptvsdArgs) File "c:\Users\H\.vscode\extensions\ms-python.python-2019.4.11987\pythonFiles\lib\python\ptvsd\__main__.py", line 410, in main run() File "c:\Users\H\.vscode\extensions\ms-python.python-2019.4.11987\pythonFiles\lib\python\ptvsd\__main__.py", line 291, in run_file runpy.run_path(target, run_name='__main__') File "D:\ProgramData\Anaconda3\lib\runpy.py", line 263, in run_path pkg_name=pkg_name, script_name=fname) File "D:\ProgramData\Anaconda3\lib\runpy.py", line 96, in _run_module_code mod_name, mod_spec, pkg_name, script_name) File "D:\ProgramData\Anaconda3\lib\runpy.py", line 85, in _run_code exec(code, run_globals) File "c:\Users\H\Desktop\pth_test\tutorial1.py", line 25, in <module> layer1=torch.empty([5,3,2],requires_grad=True,device=devic) TypeError: empty(): argument 'device' must be torch.device, not device替换为clip-paths来解决此问题。

overflow: hidden;

就必须添加绝对位置而言，将overflow：hidden元素包装在另一个位置：相对元素中，然后添加上，下，左和右：0;应该填充它的父容器。

Answer 3

2020解决方案：

我只是遇到了同样的问题，幸运的是overflow-x: hidden可以用类似的属性替换。

就我而言，我想防止在移动视口上进行水平滚动。因为我主要使用 CSS网格，所以我用SASS / SCSS来解决了这个问题：

@include media('<tablet') { // When tablet viewport or smaller
    main {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
...

这可以防止<main>标记内的任何元素溢出。

顺便说一句，要支持CSS网格跨浏览器，您只需使用autoprefixer。

Answer 4

通过引入display: contents，您可以在具有自动溢出/隐藏溢出功能的容器内使用sticky，并跳过此无聊的限制。

您只需要使用display: contents

将组件包装在div中

演示：https://jsbin.com/zodacapamu/edit?html,css,output

有关https://css-tricks.com/get-ready-for-display-contents/

的更多信息

当然，只有在有人工作之前，它才能在IE11中工作，但是新的浏览器可以正常工作。

在下面的图片中，我们实现了一个表，该表包含大约50列，并且标题和前3列的位置均处于粘性状态。

Demo

Answer 5

根据Mozilla（link here）

Sticky是一个实验性API，不应在生产代码中使用。

所以对我而言，这就是它无法正常工作的原因。 Edge和IE 11都不支持它，所以对我来说，使用javascript做这样的事情将是前进的方向，有很多应该有所帮助。

这是here

的一个例子

希望这有帮助。

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

5 个答案: