.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個(gè)同級(jí)定位元素(。第01節(jié)和。section-02)，其中第一個(gè)元素位于比第二個(gè)元素更低的堆棧上下文中。將子定位元素放在第一個(gè)元素(。section-01 & gt；。div-01)在第二個(gè)元素(。截面-02)在z軸上。

標(biāo)準(zhǔn) 只有第一個(gè)元素的子元素(。section-01 & gt；。div-01)可能被CSS修改(顯然是被樣式表修改？)和HTML(JSX)。這兩個(gè)兄弟元素是由一個(gè)應(yīng)用程序生成的，由于某種原因無(wú)法訪(fǎng)問(wèn)(請(qǐng)閱讀XY問(wèn)題)。

考慮到上述標(biāo)準(zhǔn)，我們不能:

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

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

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

自然地，2號(hào)堆棧上下文將占據(jù)前臺(tái)。即使。section-02有z-index: 0，它仍然在前景中，因?yàn)樵贖TML布局中它繼續(xù)s .section-01。影響堆棧上下文的唯一方法是改變啟動(dòng)它的元素(即。第01節(jié)和。第02節(jié))。

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

圖一

.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;
  /* ... */
}

拋開(kāi)我對(duì)標(biāo)準(zhǔn)的懷疑，這是一個(gè)真正的問(wèn)題，(也許很難針對(duì)應(yīng)用程序的HTML/CSS，因?yàn)樗峙潆S機(jī)確定的# ids或。類(lèi))，有一個(gè)解決方案可以得到同樣的結(jié)果，但是是以間接的方式。

因?yàn)槲覀兡芡耆刂频奈ㄒ辉厥恰iv-01，我們可以使用。具有()偽類(lèi)。(見(jiàn)圖二)/

圖二

/* 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出現(xiàn)在section-02的頂部，同時(shí)保持section-01在兩者之下，您需要稍微調(diào)整HTML結(jié)構(gòu)，通過(guò)添加一個(gè)具有相對(duì)位置的公共索引上下文，如下所示:

.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節(jié)的z索引更改為-1

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