javascript - 带有单独背景幻灯片的 slider

Question

我正在尝试为一个网站创建效果，该网站在页面顶部附近有一个大型内容 slider 。也就是说，我想在 <div> 后面放置一个更大的图像包含 slider ，以便它从左侧、右侧和底部向外显示，但位于其他内容的后面。 (查看 AutoDesk 网站首页上的 slider 以获得类似示例)我目前正在使用 Foundation 4 框架和 Unslider.js。

想想这个结构:

<ul class="slider-background">
    <li class="slider-bckgrnd"><img src="./bg.png"/></li>
    ...
    <li class="slider-bckgrnd"><img src="./bg.png"/></li>
<ul>

<div class="slider">
    <ul>
        <li class="slide"><img /></li>
        ...
        <li class="slide"><img /></li>
    </ul>
</div>

我遇到的最大问题是弄清楚如何让背景图像显示在背后其他所有内容。

我已经尝试过 z-index，但这对页面下方的元素不起作用。解决方案是额外的包装器吗 <div>围绕整个事情？

编辑:我希望每张幻灯片都有一个单独的背景，并且幻灯片的高度各不相同。我正在通过 jQuery/javascript 处理定位。

Answer 1

解决方案比预期的要容易得多。我只需将 position: relative; 分配给来自 Foundation 的 .row 以允许它们遵守 z-index 规则。