目标

给定2个同级元素（.section-01和.section-02），其中第一个元素位于比第二个元素更低的堆栈上下文。将第一个元素（.section-01 > .div-01）的子定位元素放置在z轴上第二个元素（.section-02）的上方。

标准

只有第一个元素（.section-01 > .div-01）的子元素可以被CSS修改（显然是被样式表修改？）和HTML（通过JSX）。这两个兄弟元素是由一个应用程序生成的，由于某种原因无法访问（请阅读XY problem）。
考虑到上述标准，我们不能：

• 添加、删除或修改HTML（.div-01例外）
• 添加、删除或修改CSS（.div-01例外）

问题

有两种堆叠上下文：

1. .section-01位于z-index: 0，没有任何扩展定位（top、right、bottom和left），也不引用任何其他已定位元素（position: relative）。
2. .section-02位于z-index: 1的所有其他元素之上，其位置参考视口（top、left和position: fixed）。
   自然#2堆叠上下文将占据前景。即使.section-02有z-index: 0，它仍然会在前台，因为在HTML布局中它继续.section-01。影响堆栈上下文的唯一方法是更改启动它的元素（即.section-01和.section-02）。

解决方案

如果我们可以解决这个问题，而不必考虑*Criterias*中提到的不可能的限制，我们可以简单地通过将position: static分配给它，将.section-01放回文档的正常 * 流 * 中（或者一起删除position:），从而删除它作为堆栈上下文的起源，并允许它的子元素，.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，因为它分配随机确定的#id或.classes），有一个解决方案具有相同的结果，但以间接的方式。
由于我们完全控制的唯一元素是.div-01，因此我们可以通过使用.has()伪类来定位它的父元素。（见图二）/

图二

/* 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>

您不能像这样将section-02的z索引更改为-1

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