Html CSS Z索引堆叠上下文拼图

我有以下标记：

此处文本

.slide

div必须绝对定位，

.slide wrap

将具有位置：relative

.overlay

div是否可能位于图像和

.text

div之间？我需要堆叠上下文如下（从高到低）：

-正文

-覆盖层

-形象

谢谢

---

这里的实时示例：（查看幻灯片…在本示例的特定上下文中，“overlay”具有类“kineticjs内容”，并且

.slide

div位于

#slides

父div的内部。

关键是要确保所有内容都绝对定位，这样您就可以使用任意z索引随意浮动所有内容

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;
}​

---

jsiddle link:

你必须给

一个
z-index
。text

，如果你想让它在所有东西之上，它必须是最高的。你也不能给

一个
z-index
给
。slide
或
。slide wrap
，因为这会创建一个新的堆叠上下文，带有text和图像嵌套在其中。您需要文本、图像和覆盖在同一个页面上

这是一个JSFIDLE to。这是。
“这里的实例：”-我要投票表决这个问题。
：）
在pagodabox中的选择不错，我喜欢他们的设置。你只发送了一个指向JSFIDLE.net主页的链接，而不是一个真正的小提琴！嗯。。。哼！你的呢？好吧，好吧，等一下，我没收到你的熨斗这是很棒的土豆泥。。。但我意识到我的问题不够具体。。。如果有机会，请再看一看！谢谢大家!@j-man86似乎仍然可以正常工作，只是添加了新的HTML，made.slide-wrap-position:relative和.slide-position:absolute。我是不是漏掉了什么问题？那把新小提琴真的。。。有机会时更新您的答案。非常感谢。很抱歉我稍微改变了问题，同样的原则仍然适用。正如我所说，您必须为.text提供z索引，而不能为.slide-提供z索引。
.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;
}​