今天經過幾個小時的調試，我艱難地了解到:

如果父元素的z-index為任意值，則無論您如何更改子元素的CSS，父元素都無法覆蓋(堆疊)子元素

用邏輯怎么理解這種行為？規范里有嗎？

.container {
  width: 600px;
  height: 600px;
  background-color: salmon;
  position: relative;
  z-index: 99;
  padding-top: 10px;
}

h1 {
  background-color: pink;
  position: relative;
  z-index: -1;
  font-family: monospace;
}

<div class="container">
  <h1>1. I can never be covered by parent if my z-index is positive.</h1>
  <h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1>
</div>

你需要知道兩件重要的事情:繪畫順序和堆疊環境。如果您參考規范，您可以找到元素是如何以及何時被繪制的。

堆疊由具有負z索引(不包括0)的定位后代以z索引順序(首先是最負的)然后是樹順序形成的上下文。 所有定位的、不透明的或變換的后代，按樹順序屬于以下類別:

以樹順序排列的所有帶有“z-index: auto”或“z-index: 0”的定位后代。 堆疊由定位的z索引大于或等于1的后代形成的上下文，按z索引順序(最小的先排列)然后按樹順序排列。 由此可以清楚地看出，我們首先在步驟(3)中繪制z索引為負的元素，然后在步驟(8)中繪制z索引等于0的元素，最后在步驟(9)中繪制z索引為正的元素，這是符合邏輯的。我們還可以在說明書的另一部分讀到:

每個盒子屬于一個堆疊上下文。給定堆疊上下文中的每個框都有一個整數堆疊級別，這是它在z軸上相對于同一堆疊上下文中的其他框的位置。堆棧級別較高的盒子總是在堆棧級別較低的盒子前面格式化。盒子可能有負的堆棧級別。堆疊上下文中具有相同堆疊級別的框根據文檔樹順序從下到上堆疊。

為了理解每個元素何時被繪制，你需要知道它的堆棧上下文和它在這個堆棧上下文中的堆棧級別(由z-in dex定義)。您還需要知道該元素是否建立了堆疊上下文。這是棘手的部分，因為設置z-index將會這樣做:

對于定位框，z-index屬性指定:

當前堆棧上下文中盒子的堆棧級別。 盒子是否建立堆疊上下文 值具有以下含義:

& lt整數& gt

這個整數是在當前堆棧上下文中生成的盒子的堆棧級別。該框還建立了新的堆疊上下文。

汽車

當前堆棧上下文中生成的盒子的堆棧級別為0。除非盒子是根元素，否則它不會建立新的堆疊上下文。

現在我們有了所有的信息來更好地理解每一個案例。如果父元素的z-index值不是auto，那么它將創建一個堆棧上下文，因此無論子元素的z-index值是多少(負的或正的),都將在其中繪制子元素。子元素的z-index將簡單地告訴我們父元素內部的繪制順序(這涵蓋了您的第二點)。

現在，如果只有子元素有一個正的z-index，并且我們沒有在父元素上設置任何東西，那么考慮到繪制順序，子元素將在后面繪制(在步驟(9))而父元素在步驟(8)。繪制上面的父元素的唯一邏輯方法是增加z-index，但這樣做會使我們陷入前一種情況，即父元素將建立一個堆棧上下文，而子元素將屬于它。

當為子元素設置正的z索引時，父元素不能位于子元素之上。此外，如果我們將父元素的z-index設置為不同于auto(正數或負數)，則無法使父元素位于子元素之上。1

在父元素下面可以有一個子元素的唯一情況是在子元素上設置一個負的z-index，并保持父元素在z-index: auto，因此這個元素不會創建一個堆疊上下文，并按照繪制順序首先繪制子元素。

除了z索引之外，還有其他屬性可以創建堆疊上下文。如果您面臨一個預期的堆疊順序，您也需要考慮那些屬性，以便查看是否創建了堆疊上下文。

從上面我們可以得出一些重要的事實:

堆疊上下文可以包含在其他堆疊上下文中，并且一起創建堆疊上下文的層次結構。 每個堆疊上下文完全獨立于它的兄弟元素:在處理堆疊時，只考慮后代元素。 每個堆疊上下文都是獨立的:在堆疊元素的內容之后，整個元素都被視為父堆疊上下文的堆疊順序。裁判員 1:如果我們考慮使用3D轉換，有一些黑客的方法。

一個元素位于其父元素之下的示例，即使該元素指定了z索引。

.box {
  position:relative;
  z-index:0;
  height:80px;
  background:blue;
  transform-style: preserve-3d; /* This is important */
}
.box > div {
  margin:0 50px;
  height:100px;
  background:red; 
  z-index:-1; /* this will do nothing */
  transform:translateZ(-1px); /* this will do the magic */
}

<div class="box">
  <div></div>
</div>

思考這個問題的一個好方法是，每個父元素都包含自己的堆棧上下文。同級元素共享父元素的堆疊順序，因此可能會相互重疊。

子元素總是基于其父元素獲取堆棧上下文。因此，需要一個負的z-index值來將子元素推到其父元素(0)堆棧上下文的“后面”。

從父元素的上下文中刪除元素的唯一方法是使用position: fixed，因為這實際上是強制元素使用上下文窗口。

Mozilla文檔確實說

z-index CSS屬性設置已定位元素及其后代或flex項的z順序。

這是另一篇StackOverflow文章中關于子代與后代的一些附加邏輯。

用邏輯怎么理解這種行為？

對我來說，用邏輯很難理解你的問題。父代包含其子代。一個碗可以被另一個碗蓋住。但是你不能用碗把湯蓋住，除非你把湯從碗里拿出來。

z-Index設置重疊元素的順序。父級不能覆蓋其子級。

依我看，這完全合乎邏輯。