.App {
  font-family: sans-serif;
  text-align: center;
}

.section-01 {
  position: relative;
  z-index: 0;
  background-color: red;
  color: white;
  padding: 2rem;
}

.section-02 {
  position: fixed;
  z-index: 1;
  background-color: blue;
  color: white;
  padding: 1rem;
  top: 25vh;
  left: 30vh;
}

.div-01 {
  z-index: 2;
  position: absolute;
  background-color: purple;
  padding: 1rem;
  top: 15vh;
  left: 25vh;
}

<section class="section-01">
        Section-01
        <div class="div-01">Div-01</div>
      </section>
      <section class="section-02">
        <div>Section - 02</div>
</section>

給定2個同級定位元素(。第01節和。section-02)，其中第一個元素位于比第二個元素更低的堆棧上下文中。將子定位元素放在第一個元素(。section-01 & gt；。div-01)在第二個元素(。截面-02)在z軸上。

標準 只有第一個元素的子元素(。section-01 & gt；。div-01)可能被CSS修改(顯然是被樣式表修改？)和HTML(JSX)。這兩個兄弟元素是由一個應用程序生成的，由于某種原因無法訪問(請閱讀XY問題)。

考慮到上述標準，我們不能:

添加、刪除或修改HTML(。div-01是例外) 添加、移除或修改CSS(。div-01是例外) 問題 有兩種堆疊上下文:

。section-01位于z-index: 0，沒有任何擴展定位(頂部、右側、底部和左側)，也不引用任何其他定位的元素(位置:相對)。

。section-02位于z-index: 1處的所有其他部分之上，其位置參考視口(頂部、左側和位置:固定)。

自然地，2號堆棧上下文將占據前臺。即使。section-02有z-index: 0，它仍然在前景中，因為在HTML布局中它繼續s .section-01。影響堆棧上下文的唯一方法是改變啟動它的元素(即。第01節和。第02節)。

解決方法 如果我們可以解決這個問題，而不必考慮標準下提到的不可能的限制，我們可以簡單地放置。section-01返回到文檔的正常流程中，方法是為它分配position: static(或一起刪除position: all)，從而刪除它作為堆棧上下文的源，并允許它的子元素。div-01是它自己的堆棧上下文的來源。(見圖一)。

圖一

.section-01 {
  position: static;
  /* As it was originally, there was no real reason for it to have any `position` 
  property */;
}

.div-01 {
  position: fixed /* or `absolute` */;
  z-index: 2;
  /* ... */
}

拋開我對標準的懷疑，這是一個真正的問題，(也許很難針對應用程序的HTML/CSS，因為它分配隨機確定的# ids或。類)，有一個解決方案可以得到同樣的結果，但是是以間接的方式。

因為我們能完全控制的唯一元素是。div-01，我們可以使用。具有()偽類。(見圖二)/

圖二

/* This will target anything that is a direct ancestor (aka parent) of
.div-01 */
:has(> .div-01) {
  position: static
} 

.div-01 {
  position: fixed /* or absolute */;
  z-index: 2;

例子

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font: 2ch/1.15 "Segoe UI";
}

.section-01 {
  position: relative;
  z-index: 0;
  padding: 2rem;
  color: white;
  background-color: red;
}

.section-02 {
  position: fixed;
  top: 10vh;
  left: 30vw;
  z-index: 1;
  Width: 40vw;
  height: 30vh;
  padding: 6rem 1rem 1rem;
  text-align: right;
  color: white;
  background-color: blue;
}

.div-01 {
  position: fixed;
  top: 5vh;
  left: 25vw;
  z-index: 2;
  width: 30vw;
  height: 30vh;
  padding: 1rem;
  color: white;
  background-color: purple;
}

:has(> .div-01) {
  position: static;
}

<section class="section-01">
  Section-01
  <div class="div-01">Div-01</div>
</section>
<section class="section-02">
  <div>Section - 02</div>
</section>

如果您希望div-01出現在section-02的頂部，同時保持section-01在兩者之下，您需要稍微調整HTML結構，通過添加一個具有相對位置的公共索引上下文，如下所示:

.container {
  position: relative;
}

.section-01 {
  width: 100vw;
  position: relative;
  z-index: 1;
  background-color: red;
  color: white;
  padding: 2rem;
  border: 1px solid red;
}

.section-02 {
  position: absolute;
  z-index: 2;
  background-color: blue;
  color: white;
  padding: 1rem;
  top: 4.6rem;
  left: 11rem;
}

.div-01 {
  z-index: 3;
  position: absolute;
  background-color: purple;
  padding: 1rem;
  top: 2.5rem;
  left: 10rem;
}

<div class="container">
  <section class="section-01">
    Section-01
  </section>
  <div class="div-01">Div-01</div>
  <section class="section-02">
    <div>Section - 02</div>
  </section>
</div>

您不能像這樣將第-02節的z索引更改為-1

<section id='section-02' style={{zIndex: -1}}>
</section>