Absolute元素被Sticky元素遮挡，z-index无效问题求助

根因分析 #

.sidebar 和 .header 都设置了 position: sticky，这会让它们各自创建独立的堆叠上下文。由于 .sidebar 在 DOM 结构中位于 .content 之前，默认情况下 .content 的堆叠上下文（包含 .header）会渲染在 .sidebar 的堆叠上下文之上。.button 的 z-index 仅能在 .sidebar 的堆叠上下文内部生效，无法突破到外部覆盖 .header。

解决方案 #

给 .sidebar 添加一个高于 .header 的 z-index 值（只需要设置任意正数值即可，因为 .header 未设置 z-index），提升 .sidebar 整个堆叠上下文的层级，这样其内部的 .button 就能覆盖在 .header 上方。

修改后的 CSS 代码：

.wrapper {
  display: flex;

  .sidebar {
    width: 200px;
    position: sticky;
    top: 0;
    background-color: red;
    height: 100vh;
    z-index: 1; /* 添加这行代码 */

    .button {
      position: absolute;
      top: 0;
      right: 0;
      translate: 10px 10px;
      width: 30px;
      height: 30px;
      background-color: black;
      z-index: 10;
    }
  }

  .content {
    flex-grow: 1;

    .header {
      position: sticky;
      top: 0;
      height: 56px;
      background-color: yellow;
    }

    .body {
      height: 3000px;
    }
  }
}

原理说明 #

设置 z-index 后，.sidebar 的堆叠上下文层级高于 .content，因此 .sidebar 内部的所有元素（包括 .button）都会渲染在 .content 内部元素（包括 .header）的上方。此时 .button 的 z-index 依然可以控制它在 .sidebar 内部的层级，不影响外部的堆叠关系。

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