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

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 索引，但这不适用于页面下方的元素。 解决方案是围绕整个事情<div>的额外包装器吗？

编辑：我想要每张幻灯片的单独背景，并且幻灯片的高度不同。 我正在通过jQuery/javascript处理定位。

Answer 1

解决方案比预期的要容易得多。 我只需要将position: relative;分配给基金会的.row，让他们遵守z-index规则。