基于Flexbox实现双向粘性网格（冻结窗格）的布局问题

问题说明 #

需要用Flexbox实现双向粘性网格：左侧固定若干列、顶部固定表头；向上滚动时，粘性单元格需被表头遮挡，但调整z-index后无效，当前粘性列会覆盖表头，且要求在div容器内实现（而非基于视口）。

问题根源 #

.header-row本身是position: sticky元素，但未设置z-index，导致内部的.header-sticky的z-index仅在.header-row内部生效；而.cell-sticky是相对于父容器.container定位的，默认层级高于未设置z-index的.header-row，因此会覆盖表头。

修复方案 #

给.header-row设置高于.cell-sticky的z-index，确保表头行整体在粘性单元格上方；内部的.header-sticky的z-index只需保证在表头行内的层级正常即可。

修改后的CSS代码 #

body {
  font-family: Calibri;
}

.container {
  width: 1000px;
  height: 180px;
  overflow: auto;
}

.row {
  display: flex;
  align-items: stretch;
}

.row:nth-child(2n) {
  background-color: white;
}

.row:nth-child(2n+1) {
  background-color: #dddddd;
}

.header-row {
  display: flex;
  align-items: stretch;
  position: sticky;
  top: 0;
  z-index: 10; /* 新增：让表头行整体层级高于粘性单元格 */
}

.header {
  flex-grow: 1;
  min-width: 200px;
  min-height: 70px;
  padding: 5px;
  border: 1px solid #414141;
  font-weight: bold;
  background-color: white;
  margin: 0;
  text-align: center;
}

.header-sticky {
  position: sticky;
  z-index: 1; /* 调整：只需保证在表头行内的层级，无需过高 */
}

.cell {
  margin: 0;
  min-width: 200px;
  min-height: 70px;
  padding: 5px;
  border: 1px solid #414141;
  text-align: center;  
}

.cell-sticky {
  position: sticky;
  z-index: 5; /* 保持低于表头行的z-index */
}

HTML代码（无需修改） #

<div class="container">
  <div class="header-row">
    <div class="header header-sticky" style="left: 0">Sticky Header 1</div> 
    <div class="header header-sticky" style="left: 200px">Sticky Header 2</div>
    <div class="header header-sticky" style="left: 400px">Sticky Header 3</div>
    <div class="header header-scrollable">Scrollable Header 1</div> 
    <div class="header header-scrollable">Scrollable Header 2</div>
    <div class="header header-scrollable">Scrollable Header 3</div>
  </div>
  <div class="row">
      <div class="cell cell-sticky" style="left: 0">Sticky Cell 1</div>
      <div class="cell cell-sticky" style="left: 200px">Sticky Cell 2</div>
      <div class="cell cell-sticky" style="left: 400px">Sticky Cell 3</div>    
      <div class="cell cell-scrollable">Scrollable Cell 1</div>
      <div class="cell cell-scrollable">Scrollable Cell 2</div>
      <div class="cell cell-scrollable">Scrollable Cell 3</div>    
  </div>
    <div class="row">
      <div class="cell cell-sticky" style="left: 0">Sticky Cell 1</div>
      <div class="cell cell-sticky" style="left: 200px">Sticky Cell 2</div>
      <div class="cell cell-sticky" style="left: 400px">Sticky Cell 3</div>    
      <div class="cell cell-scrollable">Scrollable Cell 1</div>
      <div class="cell cell-scrollable">Scrollable Cell 2</div>
      <div class="cell cell-scrollable">Scrollable Cell 3</div>  
  </div>
</div>

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