在以下示例中，我想将时间轴标题粘贴到页面顶部： http://jsfiddle.net/m152usbd/1/
但是由于时间轴启用了溢出功能，sticky停止了时间轴标题的工作。
.timeline{
overflow: auto;
}
.timeline-header{
position: sticky;
top: 0;
}
我最想要的是： http://jsfiddle.net/ztuf4gjc/1/
但是我觉得这不是一个好的解决方案，因为我需要调整页面上的所有其他元素以使其正常工作，并且我可以预见到一些副作用的发生。另外，我只希望时间轴部分在x轴上滚动，而不是整个页面。
有人知道如何解决这个问题吗？
更新
不幸的是，基于@ a--m答案，CSS可能无法实现。 这是js方法：http://jsfiddle.net/cvk43g1o/
如果有人知道如何使用CSS做到这一点，请告诉我！
答案 0 :(得分：1)
我认为仅使用CSS不可能达到您的要求：
粘性放置的框的位置与相对放置的框的位置类似，但是偏移量是使用滚动框参照最近的祖先，如果没有祖先具有滚动框，则参照视口进行计算。
https://www.w3.org/TR/css-position-3/#sticky-pos
由于父级timeline具有水平滚动，因此粘滞引用了该滚动条，并失去了根据您的需要跟踪窗口的功能。在这种情况下，对sticky的限制是无法跟踪两个不同的容器。
答案 1 :(得分：0)
在我看来，您可以将.timeline-header的内容复制到.timeline中，并且据我所知，似乎可行。
将position: sticky应用于.timeline-header时不起作用的原因是，滚动依赖于它的包含块，并且由于它占据了大部分包含块的位置，因此您实际上看不到它的移动在返回相对位置之前。将position: sticky应用于.timeline时，包含块要大得多，您可以看到它在整个页面中滚动。