Javascript 带独立背景幻灯片的滑块

我正在尝试为一个网站创建一个效果，该网站在页面顶部附近有一个大的内容滑块。也就是说，我想在包含滑块的

后面放置一个较大的图像，使其从左、右和底部向外显示，但保留在其他内容后面。（看一下Autodesk网站的FrontPage上的滑块以获得类似的例子）我现在使用的是基础4框架，unSunDel.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，但是对于页面下面的元素，它不起作用。解决方案是否是围绕整个问题的额外包装

---

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

解决方案比预期的简单得多。我只需要分配

位置：relative到<代码>。行< /代码>从基础允许他们遵守<代码> z索引< /代码>规则。