為什么位置：相對； 似乎改變了z-index？

Question

所以我有這個標記，里面有<div class="mask"></div>它將藍色疊加層設置在圖像的頂部。

如果我不設置.container position:relative ，標題文本就會隱藏在藍色層后面......幾乎就像它的用法是模仿z-index

為什么會這樣？

筆： https : //codepen.io/anon/pen/OBbbZB

 body { margin: 0; font-family: arial; } section { position: relative; background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg) no-repeat left center/cover; height: 70vh; display: flex; justify-content: center; } .container { position: relative; width: 100%; max-width: 1280px; display: flex; justify-content: center; align-items: center; color: white; } .mask { position: absolute; width: 100%; height: 100%; background: #3452ff; opacity: 0.7; }

 <section> <div class="mask"></div> <div class="container"> <h1>Hello World</h1> </div> </section>

Answer 1

您需要參考規范和更准確的繪畫順序，以了解何時打印每一層。

沒有position:relative你的元素沒有定位，將在步驟 (4) 中繪制：

4. 對於按樹順序排列的所有流入、非定位、塊級后代：如果元素是塊、列表項或其他塊等效項：

然后我們在步驟（8）中繪制定位元素（包括.mask ）

8. 所有定位、不透明度或變換后代，按樹順序分為以下類別

---

現在，當您添加position:relative時，您將容器也定位，因此它也將落入步驟 (8) 中，並且如此處所述，我們考慮樹順序，因為兩者都沒有指定任何z-index 。 所以在這種情況下.container將在稍后繪制。

如果您更改元素的順序（在蒙版之前制作容器），您會注意到position:relative不會有任何影響，因為在這兩種情況下，繪制順序將相同：

 body { margin: 0; font-family: arial; } section { position: relative; background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg) no-repeat left center/cover; height: 70vh; display: flex; justify-content: center; } .container { position: relative; /* you can remove this*/ width: 100%; max-width: 1280px; display: flex; justify-content: center; align-items: center; color: white; } .mask { position: absolute; width: 100%; height: 100%; background: #3452ff; opacity: 0.7; }

 <section> <div class="container"> <h1>Hello World</h1> </div> <div class="mask"></div> </section>

如果我們檢查步驟（8），它也說不透明度或變換，這意味着如果你也改變容器的不透明度或添加變換，順序也會改變。

 body { margin: 0; font-family: arial; } section { position: relative; background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg) no-repeat left center/cover; height: 70vh; display: flex; justify-content: center; } .container { transform:translate(0); /*added this*/ width: 100%; max-width: 1280px; display: flex; justify-content: center; align-items: center; color: white; } .mask { position: absolute; width: 100%; height: 100%; background: #3452ff; opacity: 0.7; }

 <section> <div class="mask"></div> <div class="container"> <h1>Hello World</h1> </div> </section>

---

值得注意的是，如果您添加z-index （負數或正數），您也會影響繪制順序，在這種情況下，樹順序將不起作用。

3. 堆疊上下文由具有負 z 索引（不包括 0）的定位后代以 z 索引順序（最負的優先）然后樹順序形成

....

9. 由 z 索引大於或等於 1 的定位后代形成的堆疊上下文，按 z 索引順序（最小的在前）然后是樹順序。

我們在 (3) 處用負z-index繪制元素，在 (9) 處用正值繪制元素，在這些步驟之間，我們有所有不涉及z-index的情況，如最初所述。

Answer 2

這是一個引人入勝的問題。 看起來，當 .mask div 被設為絕對並從文檔流中取出時，受影響的是位置，但元素的堆疊順序仍然存在。 因此，絕對 div 之前的元素出現在 div 下方，而絕對 div 之后的元素則堆疊在其后。

這不是一個真正的答案，我只是想演示我所看到的：

 body { margin: 0; font-family: arial; } section { position: relative; background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg) no-repeat left center/cover; height: 70vh; display: flex; justify-content: center; } .container0 { width: 100%; max-width: 1280px; display: flex; justify-content: center; align-items: center; color: white; } .container { position: relative; width: 100%; max-width: 1280px; display: flex; justify-content: center; align-items: center; color: white; } .mask { position: absolute; width: 100%; height: 100%; background: #3452ff; opacity: 0.7; }

 <section> <div class="container0"> <h1>Another Hello World</h1> </div> <div class="mask"></div> <div class="container"> <h1>Hello World</h1> </div> </section>