滚动容器内的 CSS 定位元素“固定”

Question

我想知道是否有人为此找到了解决方案？

我正在寻找一种将元素附加到滚动容器顶部的解决方案

HTML:

 <div class="container">
  <div class="header">title</div>
  <div class="element">......</div>
  ... (about 10-20 elements) ...
  <div class="element">......</div>
</div>

所有“元素”都有 position:relative ，

该容器具有以下 CSS：

 .container {
  position:relative;
  width:200px;
  height:400px;
  overflow-y:scroll;
}

我希望标题保持在容器的顶部，独立于它的滚动位置和在下面滚动的元素。

到目前为止的 CSS：

 .header {
  position:absolute; /* scrolling out of view :-( */
  z-index:2;
  background-color:#fff;
}
.element{
  position: relative;
}

所有元素都是块元素，我不能将标题移出容器。 jquery 在这一点上是没有选择的。

原文由 Siggi Gross 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您的解决方案通过了 position:sticky 。看起来就像 position:fixed 但尊重他父母的相对位置。

不幸的是，这是一项实验性功能，仅在 Chromium 中受支持。您可以在 此测试页面 中查看更多详细信息。

我想到的纯 css 解决方案是对标记进行一些更改。您可以仅为“元素”设置一个容器，如下所示：

 <div class="cont_elements">
      <div class="element">......</div>
      .....
</div>

并将溢流给这个内部容器。现在，您的页眉位于顶部。

这是一个工作演示。

原文由 Arkana 发布，翻译遵循 CC BY-SA 3.0 许可协议