Css 多个z索引元素

我正在做一个项目，我对z-index属性有点问题

这是我的密码：

（HTML）

是所有的代码和可视化

我打算达到这样的效果：

我需要做的就是在主框（带文本的灰色字段）和后框（主框的红色背景）之间插入inn_blue和inn_green（框1和框2的白色字段）

我不知道我做错了什么。主框的Z指数应该大于inn_blue/inn_green的Z指数，inn_blue/inn_green的Z指数应该大于后框

在我的代码中也是如此，但效果并不是我所期望的

---

所以问题是我做错了什么？

设置

位置：initial；

用于

。back\u box

通过稍微简化标记和css，只对必要的部分（即顶部框边框和中间框内部）进行z索引，我相信我已经找到了您想要的：

[class*=“border”]{
宽度：100px；
高度：100px；
边框：10px纯绿；
位置：相对位置；
}
[类别*=“内部”]{
宽度：100%；
身高：100%；
背景色：#999；
位置：相对位置；
文本对齐：居中；
框大小：边框框；
填料：1×1米；
}
.中框边框{
宽度：200px；
高度：200px；
边框颜色：蓝色；
利润上限：-40px；
左边距：75px；
}
.中盒内部{
背景色：#ccc；
文本对齐：左对齐；
z指数：20；
}
.机器人箱边框{
利润上限：-40px；
左边距：255px；
}
.顶框边框{
z指数：10；
}

方框1
同一天，我要为精英们祈祷。我要为他们祈祷，我要为他们祈祷！我要为他们辩护，我要为他们辩护，我要为他们辩护，我要为他们辩护。
方框2

只需将每个框的位置设置为相对位置，将背景（边框）和内容持有者的位置设置为绝对位置，使其脱离工作流程，然后第一个元素的z索引将更高，后面的元素将更低，看看这一个

*{
框大小：边框框；
填充：0；
保证金：0；
}
续{
宽度：100%；
}
.蓝盒子{
宽度：20%；
高度：150像素；
位置：相对位置；
利润率：10px 0px 0px 8%；
光标：指针
}
.蓝色盒子.背景{
背景颜色：蓝色；
身高：100%；
宽度：100%；
位置：绝对位置；
}
.蓝色盒子.内容{
背景色：#fff；
位置：绝对位置；
顶部：10px；
左：10px；
右：10px；
底部：10px；
z指数：2
}
.红盒子{
宽度：40%；
高度：150像素；
位置：相对位置；
左缘：19%；
利润上限：-70px；
}
.红盒子.背景{
背景色：红色；
身高：100%；
宽度：100%；
位置：绝对位置；
}
.红色方框.内容{
背景色：#eee；
位置：绝对位置；
顶部：10px；
左：10px；
右：10px；
底部：10px；
z指数：3；
溢出：隐藏
}
.绿盒子{
宽度：20%；
高度：150像素；
位置：相对位置；
左边距：50%；
利润上限：-70px；
光标：指针
}
.绿色盒子.背景{
背景颜色：绿色；
身高：100%；
宽度：100%；
位置：绝对位置；
z指数：-1
}
.绿色方框.内容{
背景色：#fff；
位置：绝对位置；
顶部：10px；
左：10px；
右：10px；
底部：10px；
}

框1
知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。
框2

在您的示例中，复杂的层次太多了。相反，让我们使用自然层，以

绝对的

和最小的标记来发挥我们的优势和位置

基础 首先用包装纸包装三个盒子：

<div class="wrapper">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

.outer_obw {
   width: 78.5%;
   margin: 0 auto;
}
.obw1 {    
   min-height: 80px;
}
.obw3 {
   min-height: 80px;
   margin-top: -40px;
}
.box {
   width: 25.25%;
   min-height: 80px;
   cursor:pointer;  
   position: relative;
}
.inner_box {
   height: 68px;
   margin: -10.5px 6px;
   text-align: center;
   position: relative; 
}
#inn_blue {
   background-color: #fff;
   z-index: 5;
}
#inn_green {
   background-color: #fff;
   z-index: 5;
}
#blue_box {
   background-color: blue;
   float: left; 
   z-index: 1;
}
#green_box {
   background-color: green;
   float: right;
}
.main_box_content {
   display: table;
   width: 78.5%;
   position: absolute;
   margin-top: -40px;
}
.back_box {
   display: table;
   background-color: blue;
   width: 65%;
   margin: 0 17%;
   position: relative;
   z-index: 3;
}
.main_box {
   display: table;
   background-color: #f1f1f1;
   margin: 6px;
   padding: 0.5% 3%;
   position: relative;
   z-index: 10;
}

<div class="wrapper">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>