DIV具有大z索引是具有较小的z-index

在div下我有一个问题：DIV具有大z索引是具有较小的z-index

元素重叠的元素，因为它具有较高的z索引（10比5）。元素具有子元素＃子块-1 &＃子块-2和＃子块-1具有子文本＃text1，其中z-index = 20。但是具有z-index = 20的＃text1仍处于z-index = 10。为什么？

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

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

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

附：以上示例在jsfiddle中无法正确显示 - 元素的位置（＃子块-1 &＃子块-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>

来源

2017-04-18 Zhihar

** z-index **相对于https：//developer.mozilla。org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context – DaniP

z-index适用于同一父级直接相同级别上的所有元素 - 因此在您的情况下，主块的z-索引比屏幕将出现在主块和所有子块之上（因为主块子z-index不会计入屏幕z-index） – Pete

首先阅读[没有人告诉你关于Z-Index]（https： //philipwalton.com/articles/what-no-one-told-you-about-z-index/）了解问题所在。 – CBroe

#main-block是在相同的水平.screen和具有较低z-index。因此，#main-block的子元素将始终与.screen及其子元素重叠。

无论您何时将元素设置为position: relative或position: absolute，您都会为其所有子项创建一个新的z-index堆栈。

要么你必须移动的#main-block某些级别的子元素，直到让他们独立或给#main-block更高z-index这也将导致重叠.screen。

提示：负z-index也是可能的。并清理你的标记（关键字：单引号）。 ;-)

来源

2017-04-18 14:25:03 Mary

好的，但是如何将子元素移动到新的Z-index内容（当孩子及其父母都已具有“位置”样式时）？ – Zhihar

你必须改变你的HTML。我不知道你在做什么，但我强烈建议重新考虑是否有更好的方法，因为无论如何绝对定位都是一种压路机策略。 – Mary

#text仍然在你的区块内，它的索引比它的兄弟低。 #text部分仍处于其父项的相同上下文块中。您可以查看this page中的z索引的内部工作方式。

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

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

来源

2017-04-18 14:35:30 Andrewmat

DIV具有大z索引是具有较小的z-index

回答

相关问题