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

Question

我正在尝试为在页面顶部附近具有大型内容滑块的网站创建效果。也就是说，我想在<div>包含滑块的后面放置一个更大的图像，以便它从左侧、右侧和底部向外显示，但留在其他内容后面。（查看 AutoDesk 网站首页上的滑块以获取类似示例）我目前正在使用 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;给.row基金会的 's 以允许他们遵守z-index规则。