如何使 div 堆叠在 "fixed positioned" 元素(包含全屏背景幻灯片)的顶部?

How to make a div stacked on the top of a "fixed positioned" element (which contains a full screen background slideshow)?

JSFiddle here.

所以在我的 SSCCE 中,我有一个 ulposition:fixedbackground-size:cover 集。此 ul 包含 6 span 张,有 background 张图片,将以幻灯片形式显示。

I followed this tutorial to make this. (Demo here)

现在我有更多内容要添加到页面中。 我希望它有点 displayed like this (i.e. the slideshow should be fixed in the background, and the rest of the content should be hovering over it-scrolling if needed.) - Tutorial here

我已经预料 如果我为 ul 下的其余内容创建一个 div 包含标记中的幻灯片,我会得到想要的结果——因为在我链接的 CSS-Tricks 演示中,背景图像应用于 <html>,它有一个 fixed 位置,没有 position 应用于其余内容(因此 static 默认情况下),并且在我的代码中 ul 也有一个固定位置。 但是我的内容好像是堆叠在幻灯片下面?

那么我该怎么做才能使 #content-below-slider div 堆叠在包含幻灯片的 ul 上,而不是在其下方?


我试过的:

我尝试将 z-index:10000; 应用于 #content-below-slider,但这没有任何区别。我不知道还能做什么。

我知道 position:fixed 元素超出了页面的流动范围并悬停在页面其余部分的顶部,但是为什么 CSS-tricks 演示中没有出现这种情况.我该怎么办?


注意:- 我没有 post 代码,因为任何阅读该问题的人都会检查 Fiddle 链接,所以这可能会使问题变得不必要地冗长。如果您认为我也应该 post 这里的代码,请告诉我。

我认为您可以将此 CSS 添加到 #content-below-slider(抱歉,如果我不理解您,这不是您想要的):fiddle

#content-below-slider {
 position: relative;
}