滑块与单独的背景幻灯片

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，以允许他们遵守z-index规则。