解决粘滞元素后出现相对定位的CSS元素的问题

Question

将元素定位为sticky时，似乎任何后续和相邻元素定位为相对的都不会滚动到粘滞元素的后面。

我不能工作了，如果这是有意的还是错误。

在我的更大的用例中，我有一个粘性元素，在下面的容器中，我有一个DataTables实例，碰巧它的元素的样式是相对的。

对于较小的演示，我有这三个例子。

第一个示例取自https://www.sitepoint.com/css-position-sticky-introduction-polyfills/，并且所有内容都按预期工作。

实施例1：http://codepen.io/SitePoint/pen/hewAv

第二个例子显示了整个container类为相。当您向上滚动并且菜单变粘时，container类的内容将滚动到粘性容器的前面。

实施例2：http://codepen.io/anon/pen/ZKzEBZ

第三个示例显示在container类第一段为相。当您向上滚动并且菜单变粘时，relative类的内容将滚动到粘滞容器的前面，而其他内容则滚动到后面。

实施例3：http://codepen.io/anon/pen/wdwvEY

我想找到一个解决方案，其中的相对含量将滚动粘性元件后面。

---

回答以下问题的意见：

• 的示例都使用`位置：粘性”。
• 我试过使用Chrome 57和Firefox 52.0a2。

Answer 1

尝试给出相对元素的z-index为-1，以便它出现在该粘性元素的后面。

.relative { 
    position: relative; 
    z-index:-1; 
} 

或者给粘性元素一个z-index高于页面上其他所有元素的z值，所以它总是在最上面。