Question

我有以下标记： 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>

.slide div必须绝对定位，.slide-wrap的位置为：relative。

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

-Text

-Overlay

- 图像

谢谢！

此处的实例：http://movable.pagodabox.com（检查幻灯片...在此示例的特定上下文中，“overlay”具有类“kineticjs-content”，并且.slide div位于#slides父div。

Answer 1

关键是要确保一切都是绝对定位的，这样你就可以随意使用任何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

Answer 2

您必须向z-index提供.text，如果您希望它在所有内容之上，则必须是最高的。{1}}。并且不得给z-index .slide或.slide-wrap，因为这会创建一个新的堆叠上下文，其中嵌入了文本和图像。您需要同一stacking context上的文字，图片和叠加层。

这是demonstrate的jsfiddle。这是same idea applied to your jsfiddle。

CSS Z-Index堆叠上下文拼图

2 个答案: