card子元素button层级需高于同级popup，z-index无效如何解决？

问题根源 #

你遇到的是**堆叠上下文（Stacking Context）**的核心问题：

• main设置了relative定位，会创建一个顶级堆叠上下文。
• 如果card添加了position: relative/absolute/fixed、opacity < 1、transform这类属性，会触发自身的独立堆叠上下文。此时card内部的按钮无论设置多高的z-index，都只能在card的堆叠上下文范围内生效，无法突破到同级的popup上方。

具体解决步骤 #

1. 解除card的堆叠上下文约束

检查并移除card上所有会触发堆叠上下文的CSS属性，比如：

.card {
  /* 移除以下这类属性 */
  /* position: relative; */
  /* opacity: 0.9; */
  /* transform: translate(0); */
}

2. 直接在main的堆叠上下文里调整层级

给popup和按钮设置明确的z-index，确保按钮层级更高：

.popup {
  position: absolute;
  z-index: 1; /* 让popup显示在card上方 */
  /* 补充你的定位坐标，比如top/left等 */
}

.card__shareBtn {
  z-index: 2; /* 让按钮显示在popup上方 */
  position: relative; /* 必须设置position属性，z-index才会生效 */
}

特殊情况处理（若card必须保留position） #

如果因为布局需求，card必须设置position: relative（会强制创建堆叠上下文），可以将按钮的DOM结构从card中移出，放到main下与card、popup同级，再通过定位保持在原位置：

<main className="main relative">
  <section className="card">
    <footer className="card__footer">
      <div className="card__footerWrapper">
        <!-- 移除原按钮 -->
      </div>       
    </footer>
  </section>
  <div className="card__shareBtn absolute">...</div> <!-- 移至同级 -->
  <div className="popup absolute">...</div>
</main>

之后通过CSS定位按钮到原位置，此时按钮和popup同属main的堆叠上下文，直接调整z-index即可实现层级控制。

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