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

回答

相關問題