解決粘滯元素後出現相對定位的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值，所以它總是在最上面。