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

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

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

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 此时没有选择。

我认为你的解决方案通过position:sticky。好像是这样的position:fixed但尊重与父母的相对地位。

不幸的是，这是一个实验性功能，并且仅在 Chromium 中受支持。您可以在中查看更多详细信息这个测试页 http://html5-demos.appspot.com/static/css/sticky.html.

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

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

并将溢出物倒入该内容器中。现在，您的标题粘在顶部。

这是一个工作演示 http://jsfiddle.net/S65wj/.