Javascript z指数较大的div位于z指数较小的div之下

我有一个问题：

元素与元素重叠，因为它的z指数较高（10比5）。元素有子元素#sub-block-1和#sub-block-2，并且#sub-block-1有子文本#text1，z-index=20。但是z-index=20的#text1仍然低于z-index=10为什么？

告诉我，我如何解决这个问题？

必须具有预定义的z索引（数字，而不是“自动”，并且小于z索引，例如，5对10）

---

我的例子是：

附言。 上述示例未在JSFIDLE中正确显示-元素（#sub-block-1和#sub-block-2）的位置不起作用

正文{
背景：#00ff00；
}
.屏幕{
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100vw；
高度：100vh；
背景：#ffffff；
不透明度：0.75；
z指数：10；
}
#主块{
位置：绝对位置；
左：500px；
顶部：200px；
宽度：700px；
高度：400px；
边框：2倍实心#bb0000；
背景：#ff0000；
z指数：5；
}
.分块{
位置：绝对位置；
宽度：300px；
高度：150像素；
背景：#ffffff；
边框：4px实心#000000；
}
#子区-1{
左:100 ;；
排名前100名；
z指数：自动；
}
#次级区块2{
左：275；
排名：175；
z指数：11；
}
#文本1{
位置：绝对位置；
左：65px；
顶部：55px；
颜色：#000000；
背景#ffff00；
字体大小：30px；
字号：700；
z指数：20；
}
#文本2{
位置：绝对位置；
左：65px；
顶部：55px；
颜色：#00bbbbbb；
字体大小：30px；
字号：700；
}

测试文本
新文本

#主块

与

.screen

处于同一级别，并且具有较低的

z索引

。因此，主块的子元素将始终被

.screen

及其子元素重叠

无论何时将元素设置为

position:relative

或

position:absolute

，都会为其所有子元素打开一个新的

z-index

-堆栈

您必须将

#main block

的子元素向上移动一些级别以使其独立，或者给

#main block

一个更高的

z索引

，这也将导致重叠

。屏幕

提示：也可以使用负的

z索引

。并清理标记（关键字：单引号）。；-）

该

#文本

仍在您的块中，该块的索引低于其同级。

#text

部分仍在其父级的同一上下文块中。您可以在中查看z索引的内部工作方式

您需要创建一个新的堆叠上下文，使文本显示在另一个块的上方。一种可能的方法是将文本的不透明度更改为

.99

，或使用

transform

属性。不过，我不建议你这样做，因为这会在将来造成更多的麻烦

---

Z索引不应该经常使用。最好将其组织在HTML本身中。您应该重新考虑您的工作。

z-index与z-index相对，适用于同一父目录中同一级别上的所有元素-因此，在您的情况下，由于主块的z-index低于屏幕，屏幕将显示在主块及其所有子块的上方（因为主块子项z-index不计入屏幕z-index）从阅读开始，了解问题所在。好的，但是如何将子元素移动到新的z索引内容（当子元素及其父元素都已具有“位置”样式时）？您必须更改HTML。我不知道你想做什么，但我强烈建议你重新考虑是否有更好的方法，因为绝对定位是一种压路机战术。