Javascript css和html的z索引问题

**下面是一个简单的代码**

div{
边框：1px纯蓝色；
}
.一{
背景色：红色；
宽度：300px；
高度：300px；
}
.二{
背景颜色：橙色；
宽度：300px；
高度：300px；
位置：相对位置；
顶部：100px；
左：100px；
z指数：10；
}
.二十{
背景颜色：粉红色；
宽度：300px；
高度：300px；
位置：相对位置；
顶部：100px；
左：100px；
z指数：500；
}
.三{
利润上限：-10px；
左边距：10px；
背景颜色：黄色；
宽度：300px；
高度：300px；
}
.4{
背景颜色：绿色；
宽度：300px；
高度：300px；
位置：相对位置；
顶部：80px；
左：120px；
z指数：11；
}

粉红色能比绿色高吗？
是的，我们可以。。。如果橙色的z指数比绿色高

.two {
   ...  
   z-index: 12;
}

这是因为粉红色是橙色的后代……
除了第二十层之外，所有层都不应该有Z顺序。我们指定绝对阶数和层在Z上的阶数

.twenty{
position: absolute;
...
z-index: 1;
}

您应该将
.four
设置为
z索引小于
.two
，这是包含
.two
的元素，但这可能不是预期的结果（橙色下方也变为绿色）

如果不更改
HTML
结构，例如将
.two
放在
.four
中，或者重新定义所有索引，这是不可能的。这就是堆叠上下文的工作方式

鉴于此代码：



从顶视图

从侧面看

了解有关堆叠上下文的更多信息：




对不起，它不起作用。用你的解决方案，绿色也会变成橙色，而不仅仅是粉红色。@Artemiy Dyakov做到了-它很有效…只需从两个中删除z指数