1

我有以下标记：http: //jsfiddle.net/dy4TG/3/

<div class="slide-wrap">
    <div class="slide">
        <div class="text">Text here</div>
        <img src="image.jpg" />
    </div>
</div>

<div class="overlay"></div>

.slidediv 必须绝对定位，并且有.slide-wrapposition: relative。

div是否.overlay可以在图像和.textdiv 之间？我需要堆叠上下文是这样的（从最高到最低）：

-文本

-覆盖

-图片

谢谢！

现场示例：http: //movable.pagodabox.com（检查幻灯片...在此示例的特定上下文中，“覆盖”具有类“动力学js-content”，并且.slidediv 在#slides父 div 内部。

4

2 回答 2

2

关键是要确保所有东西都是绝对定位的，这样你就可以随心所欲地浮动所有东西，使用任何 z-index。

CSS： 

.overlay {
    width: 20px;
    height: 20px;
    background: #fff;
    z-index: 50;
    position:absolute;
    top:0;
    left:50px;
}
img{
    z-index: 20;
    position:absolute;
    top:0;
    left: 5px;
    width:100px;
    height: 100px;
    background: #000;
}
.text {
    z-index: 999;
    color: #888;
    position:absolute;
    top:0;
    left: 5px;
}
.slide-wrap{
    position:relative;   
}
.slide{
    position:absolute;
    top:0;
    left:0;
    width:100px;
}​

jsfiddle 链接：http: //jsfiddle.net/a7Apz/3

于 2012-08-18T02:48:58.450 回答
0

你必须给一个z-indexto .text，如果你想让它在一切之上，它必须是最高的。而且你不能给一个z-indexto .slideor .slide-wrap，因为这会创建一个新的堆叠上下文，其中嵌套了文本和图像。您需要文本、图像和覆盖在同一个堆叠上下文中。

这是一个 jsfiddle 来演示。这是适用于您的 jsfiddle 的相同想法。

于 2012-08-18T03:02:37.443 回答