Z Index层级问题：仅修改子div实现指定层级覆盖需求

组件结构 #

<section id='section-01' style={{zIndex: 0}}>
    <div id='div-01' style={{zIndex: 2}}>Hello World</div>
</section>
<section id='section-02' style={{zIndex: 1}}>
</section>

初始样式 #

CSS #

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

HTML结构 #

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

问题与需求 #

当前section-02（z-index:1）覆盖在div-01上方，但需要实现层级顺序：div-01 > section-02 > section-01。

限制规则 #

• 仅能修改div-01的CSS样式和JSX内容，无法改动section-01、section-02的代码及整体HTML结构。
• 已知父元素z-index更低时，子元素默认无法突破父元素的堆叠上下文层级。

效果对比 #

当前显示 #

期望显示 #

可修改代码范围 #

允许修改的CSS #

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

允许修改的JSX #

<div className="div-01">Div-01</div>

要让div-01突破父元素section-01的堆叠上下文限制，核心是给div-01创建独立的堆叠上下文，具体有两种可行方案：

方案1：改用position: fixed定位 #

修改div-01的CSS：

.div-01 {
  position: fixed; /* fixed定位会创建基于视口的独立堆叠上下文，脱离父元素约束 */
  z-index: 2; /* 数值大于section-02的z-index:1即可 */
  background-color: purple;
  padding: 1rem;
  top: 15vh;
  left: 25vh;
}

原理：fixed定位元素的堆叠上下文不受父元素影响，只要z-index数值高于section-02，就能覆盖在其上方。

方案2：通过transform创建独立堆叠上下文 #

如果需要保留absolute定位，可添加transform属性触发新的堆叠上下文：

.div-01 {
  position: absolute;
  z-index: 2;
  background-color: purple;
  padding: 1rem;
  top: 15vh;
  left: 25vh;
  transform: translateZ(0); /* 非none的transform会创建独立堆叠上下文 */
}

原理：当元素设置了非none的transform值时，浏览器会为其创建新的堆叠上下文，此时该元素的z-index不再受父元素section-01的堆叠层级限制，只要数值足够高就能覆盖section-02。

内容的提问来源于stack exchange，提问作者Shivam Sahil