具有较大z-index的div位于具有较小z-index

Question

我遇到了问题：

元素重叠元素，因为它具有更高的z指数（10对5）。元素具有子元素#sub-block-1＆amp; ＃sub-block-2，＃sub-block-1有子文本＃text1，z-index = 20.但#zinin的z-index = 20的＃text1仍然在z-index = 10下。为什么？< /强>

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

必须有预定义的z-index（数字，不是'auto'，小于z-index，例如，5 vs 10）。

我的例子： https://jsfiddle.net/nynsjv3L/1/

P.S。 上面的例子在jsfiddle中没有正确显示 - 元素的位置（＃sub-block-1＆amp; #sub-block-2）不起作用。

body {
  background: #00ff00;
}

.screen {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  opacity: 0.75;
  z-index: 10;
}

#main-block {
  position: absolute;
  left: 500px;
  top: 200px;
  width: 700px;
  height: 400px;
  border: 2px solid #bb0000;
  background: #ff0000;
  z-index: 5;
}

.sub-block {
  position: absolute;
  width: 300px;
  height: 150px;
  background: #ffffff;
  border: 4px solid #000000;
}

#sub-block-1 {
  left: 100;
  top: 100;
  z-index: auto;
}

#sub-block-2 {
  left: 275;
  top: 175;
  z-index: 11;
}

#text1 {
  position: absolute;
  left: 65px;
  top: 55px;
  color: #000000;
  background: #ffff00;
  font-size: 30px;
  font-weight: 700;
  z-index: 20;
}

#text2 {
  position: absolute;
  left: 65px;
  top: 55px;
  color: #00bbbb;
  font-size: 30px;
  font-weight: 700;
}

<div id='main-block'>
  <div class='sub-block' id='sub-block-1'>
    <div id='text1'>TEST TEXT</div>
  </div>
  <div class='sub-block' id='sub-block-2'>
    <div id='text2'>NEW TEXT</div>
  </div>
</div>
<div class='screen'></div>

Answer 1

#text仍在您的区块内，其索引低于其兄弟。 #text部分仍与其父级的上下文块相同。您可以在this page中查看z-index的内部工作原理。

您需要创建一个新的堆叠上下文，以使文本显示在另一个块上方。其中一种可能的方法是将文本的不透明度更改为.99，或使用transform属性。不过，我不建议你这样做，因为它将来会引起更多麻烦。

不应经常使用Z索引。最好在HTML本身内部组织它。你应该重新考虑你的工作。

Answer 2

<script src="js/controls/OrbitControls.js"></script> 与#main-block位于同一级别，.screen较低。因此，z-index的子元素将始终与#main-block及其子元素重叠。

每当您将元素设置为.screen或position: relative时，都会为其所有子元素打开一个新的position: absolute堆栈。

您必须将z-index的子元素移动到某些级别才能使它们独立，或者让#main-block更高#main-block，这也会导致重叠z-index

提示：也可以使用否定.screen。并清理你的标记（关键字：单引号）。 ; - ）