Html Z索引堆叠上下文

我遇到的问题是z-index并不像听起来那么简单

在基本上阅读了所有我发现的关于它的内容之后，我仍然无法找到一个解决方案。这就是我的问题：

2.
1.
3.

我想要一个不同父级的Div（#中间层）位于另外两个Div（#顶层和#底层）之间。我已经尝试了基本上所有z索引的组合，还尝试了不透明度：.99的解决方法，如下所述：

到目前为止似乎没有任何效果，我希望你能帮助我

提前非常感谢

.toplayer{
宽度：120px；
背景颜色：绿色；
位置：固定；
z指数：3；
}
#中间层{
宽度：140px；
背景颜色：蓝色；
位置：固定；
z指数：2；
}
#下层{
宽度：160px；
背景颜色：黄色；
位置：固定；
}

中间的
低的
顶部

.toplayer{
宽度：120px；
背景颜色：绿色；
位置：固定；
z指数：3；
}
#中间层{
宽度：140px；
背景颜色：蓝色；
位置：固定；
z指数：2；
}
#下层{
宽度：160px；
背景颜色：黄色；
位置：固定；
}

中间的
低的
顶部

我想这就是你需要的。请检查下面的代码

#最下层{
不透明度：.99；
}
#下层、中层、顶层{
位置：绝对位置；
宽度：100px；
颜色：白色；
线高：100px；
文本对齐：居中；
}
#下层{
z指数：1；
顶部：20px；
左：20px；
背景：红色；
宽度：200px；
高度：200px；
}
#中间层{
顶部：45px；
左：45像素；
背景：绿色；
z指数：2；
宽度：150px；
高度：150像素；
}
#顶层{
顶部：70像素；
左：70像素；
背景：蓝色；
z指数：3；
宽度：100px；
高度：100px；
}

2.
1.
3.

我想这就是你需要的。请检查下面的代码

#最下层{
不透明度：.99；
}
#下层、中层、顶层{
位置：绝对位置；
宽度：100px；
颜色：白色；
线高：100px；
文本对齐：居中；
}
#下层{
z指数：1；
顶部：20px；
左：20px；
背景：红色；
宽度：200px；
高度：200px；
}
#中间层{
顶部：45px；
左：45像素；
背景：绿色；
z指数：2；
宽度：150px；
高度：150像素；
}
#顶层{
顶部：70像素；
左：70像素；
背景：蓝色；
z指数：3；
宽度：100px；
高度：100px；
}

2.
1.
3.

这似乎不是一个

z-index

问题，而是一个定位问题。由于您使用的是

fixed

定位，请记住，元素是相对于视口定位的。要获得您想要的结果，请将其设置为

顶部

，将其设置为

底部

，最后一个（需要居中）使用此小技巧，名为

下面是您可以在JSFIDLE上看到的一个示例

更新：

如果想要的结果是简单地“分层”元素，您只需要应用

z-index

像这样

---

这似乎不是一个

z-index

问题，而是一个定位问题。由于您使用的是

fixed

定位，请记住，元素是相对于视口定位的。要获得您想要的结果，请将其设置为

顶部

，将其设置为

底部

，最后一个（需要居中）使用此小技巧，名为

下面是您可以在JSFIDLE上看到的一个示例

更新：

如果想要的结果是简单地“分层”元素，您只需要应用

z-index

像这样

---

正如@Maharkus所写的——简单的z索引1到3应该可以工作。也许这个问题是由父母的定位引起的？更新jsfiddle then.as@Maharkus写道-简单的z索引1到3应该可以工作。也许这个问题是由父母的定位引起的？然后更新JSFIDLE。我认为我在创建问题时过于简化了一点。然而，你的结果正是我想要达到的！你有没有发现一种方法可以让这把小提琴实现？基本上，每秒只有一个div。非常感谢你！我想我在提出这个问题时过于简单了一点。然而，你的结果正是我想要达到的！你有没有发现一种方法可以让这把小提琴实现？基本上，每秒只有一个div。非常感谢你！我想我在提出这个问题时过于简单了一点。然而，你的结果正是我想要达到的！你有没有发现一种方法可以让这把小提琴实现？基本上，每秒只有一个div。非常感谢你！我想我在提出这个问题时过于简单了一点。然而，你的结果正是我想要达到的！你有没有发现一种方法可以让这把小提琴实现？基本上，每秒只有一个div。非常感谢你！是的，我知道你的意思。谢谢你的回答。我只是将所有div放在顶部，这样当z索引设置正确时，它们将显示为堆叠。我想我的问题有点不准确。这解决了你最新小提琴的问题。。。基本上，您在

toplayer

中添加了一个类而不是id。是的，我知道您的意思。谢谢你的回答。我只是将所有div放在顶部，这样当z索引设置正确时，它们将显示为堆叠。我想我的问题有点不准确。这解决了你最新小提琴的问题。。。基本上，您向

toplayer

添加了一个类而不是id。

<div id="first">
 <div id="middlelayer">
   2
 </div> 
</div>
<div id="second">
  <div id="toplayer">
    1
  </div>
  <div id="lowestlayer">
    3
  </div>
</div>