父元素设overflow:auto时，position:sticky失效的纯CSS解决方案？

问题核心：position:sticky的生效逻辑是元素会相对于最近的、设置了overflow:auto/scroll/hidden的祖先容器粘滞，但如果这个祖先容器同时存在多方向滚动（比如你的案例中.wrapper有纵向滚动，.right有横向滚动），会直接破坏sticky的定位上下文，导致失效。

针对「右侧header粘滞+表格横向滚动」的需求，可通过拆分滚动容器的方式纯CSS解决，具体步骤如下：

1. 调整HTML结构 #

给右侧区域新增两层容器：一层承载header并负责纵向滚动，另一层专门包裹表格实现横向滚动：

<div class="wrapper">
  <div class="left">
    <div class="header"></div>
  </div>
  <div class="right">
    <div class="right-scroll-y">
      <div class="header">Blablabla blablabla blabla</div>
      <div class="table-container">
        <div class="table"></div>
      </div>
    </div>
  </div>
</div>

2. 修改CSS样式 #

把滚动逻辑拆分到不同容器，明确sticky元素的定位上下文：

.wrapper {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 200px auto;
  width: 100%;
  max-height: 30vh;
  position: relative;
  /* 移除原overflow-y:auto，将纵向滚动交给子容器 */
}

.left {
  background-color: chocolate;
  overflow-y: auto; /* 左侧单独开启纵向滚动 */
}

.right {
  background-color: chartreuse;
  position: relative;
}

.right-scroll-y {
  max-height: 30vh; /* 和wrapper高度限制保持一致 */
  overflow-y: auto; /* 右侧纵向滚动容器，作为sticky的定位上下文 */
  position: relative;
}

.header {
  height: 20px;
  width: 100%;
  background-color: black;
  position: sticky;
  top: 0;
  color: white;
  min-width: fit-content; /* 确保横向滚动时header内容不被截断 */
  z-index: 1; /* 防止表格内容滚动时覆盖header */
}

.table-container {
  overflow-x: auto; /* 表格区域单独开启横向滚动 */
}

.table {
  width: 2000px;
  height: 50vh; /* 原.right的高度移至此处，模拟长内容 */
}

方案说明 #

• 拆分滚动容器后，右侧.header的最近可滚动祖先变为.right-scroll-y，完全满足position:sticky的生效条件，纵向滚动时会稳定粘在顶部。
• 表格的横向滚动被限制在.table-container内，不会干扰sticky元素的纵向定位。
• min-width: fit-content保证header在横向滚动时能跟随表格宽度，避免内容截断；z-index:1防止表格滚动时覆盖header。

内容的提问来源于stack exchange，提问作者D.Zet