爲什麼用z-index 0元件被示出上述元件用z-index 1

Question

我有以下代碼（示例）：

<div style="position: fixed"> 
 
    <div id="AAA" style="position: absolute; background-color: green; z-index: 1">AAA</div> 
 
</div> 
 
<div style="position: relative"> 
 
    <div id="BBB" style="position: absolute; background-color: red; z-index: 0">BBB</div> 
 
</div>

對於我它看起來像AAA DIV應顯示在BBB格，這是因爲：

• 他們都有指定的位置和該位置支撐的z-index
• AAAž -index（1）高於BBB z-index（0）

但是在結果HTML中，BBB顯示在AAA上。爲什麼？有沒有描述這種行爲的文件？

Answer 1

因爲母公司的position和z-index開始新的堆疊順序。第一個元素具體爲position: fixed。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

甲堆疊環境中形成，在文檔中的任何地方，任何元件在下列情況下：

...

元素與位置值「固定」或「粘性」（對於所有的移動瀏覽器都是粘性的，但不是舊的桌面）。

所以第一個div的孩子z-index是相對於父母而不是文檔的其餘部分。

在此示例中，您想要將z-index應用於父代。

<div style="position: fixed; z-index: 1;"> 
 
    <div id="AAA" style="position: absolute; background-color: green; z-index: 1">AAA</div> 
 
</div> 
 
<div style="position: relative;"> 
 
    <div id="BBB" style="position: absolute; background-color: red; z-index: 0">BBB</div> 
 
</div>