Question

我在使用http://medienfreunde.com/lab/innerfade/上的innerfade.js脚本创建的图片幻灯片放映时使用CSS设置div的问题。

我使用div创建了一个图像翻转，并使用CSS为其设置了一个背景图像，该图像会在鼠标悬停时变为第二个图像。但是，当我尝试将其放在innerfade.js幻灯片放映上时，它会落后于它，而不是在前面。我将div的定位设置为absolute，并使用margin-top和margin-left属性来定位div。

我的问题是 - 如何更改我的代码，以便包含背景图像的div位于图像幻灯片的前面？

我在http://jsfiddle.net/Cwca22/SejUx/的jsFiddle中有我的代码，可以从之前列出的网站找到jquery.innerfade.js脚本。（我正在使用脚本文档中包含的“作品集”示例。）

Answer 1

尝试将大z-index值应用于.exploreButton：

.exploreButton {
    background-image: url('http://f.cl.ly/items/0w082s253z2j1r3E3C3x/explore.png');
    background-repeat: no-repeat;
    width: 216px;
    height: 52px;
    margin-top: 10px;
    margin-left: 25px;
    cursor: pointer;
    z-index: 9999;   // heres the trick
}

Answer 2

查看z-index CSS属性。

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 3

您的jsfiddle没有您描述的幻灯片，但听起来您只需要将z-index元素的#exploreButton设置为高于幻灯片显示的内容。

以下是使用z-index的示例：http://jsfiddle.net/SejUx/1/

Div出现在jquery.innerfade.js的图像后面？

3 个答案: