解决粘性元素后出现相对定位的 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

我想找到一个解决方案，让相关内容在粘性元素后面滚动。

---

问题cmets的答案：

• 示例均使用`position:sticky'。
• 我尝试过使用 Chrome 57 和 Firefox 52.0a2。

Answer 1

尝试将相对元素的 z-index 设为 -1，使其出现在该粘性元素的后面。

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

或者将粘性元素的 z-index 设置为高于页面上所有其他元素的 z-index，使其始终位于顶部。