如何实现z-index为2的absolute元素位于sticky与子absolute元素之间？

核心问题分析 #

sticky元素设置z-index:1时会创建独立的堆叠上下文，导致内部子元素的z-index:3仅在该上下文内生效，无法突破到全局上下文与外部z-index:2的元素形成层级关系——最终子元素只能处于外部元素下方，无法实现"sticky背景层 → 外部z-index:2元素 → 内部z-index:3子元素"的层级。

实现方案 #

关键是不让sticky元素创建堆叠上下文，同时用伪元素保留其背景效果，让内部子元素和外部元素处于同一全局堆叠上下文：

HTML结构

<div class="sticky-wrap">
  <div class="sticky-bg">
    <div class="sticky-child">内部子元素（z-index:3）</div>
  </div>
</div>
<div class="absolute-layer">外部absolute元素（z-index:2）</div>

CSS样式

.sticky-wrap {
  position: relative;
  /* 不要设置z-index，避免创建堆叠上下文 */
}

.sticky-bg {
  position: sticky;
  top: 0;
  z-index: auto; /* 关键：不触发堆叠上下文 */
  padding: 20px;
  width: 100%;
}

/* 用伪元素实现sticky的背景层 */
.sticky-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e0e0e0; /* 原sticky元素的背景色 */
  z-index: -1; /* 背景层在内容下方 */
}

.sticky-child {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 3;
  padding: 10px;
  background: #ff4444;
  color: white;
}

.absolute-layer {
  position: absolute;
  top: 60px;
  left: 60px;
  z-index: 2;
  padding: 15px;
  background: #33b5e5;
  color: white;
}

原理说明 #

1. sticky-bg的z-index:auto使其不会创建独立堆叠上下文，内部子元素的z-index直接作用于全局上下文。
2. 伪元素::before作为背景层，z-index:-1保证它在sticky内容的下方，同时不会干扰其他元素的层级。
3. 此时全局堆叠顺序为：sticky-bg::before(z=-1) → absolute-layer(z=2) → sticky-child(z=3)，完全符合需求。

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