Flex布局中position sticky元素遮挡滚动内容的解决方案

问题描述 #

在CSS Flexbox布局中使用position: sticky元素时，滚动发现下方的滚动项（.row）会透过粘性头部（.stick-header）和粘性区块（.stick-section）显示，希望滚动项能被粘性元素完全遮挡（比如Header与Section之间的Row需要被遮挡）。

解决方法 #

核心思路是提升粘性元素的堆叠层级，因为Flex容器内的元素默认堆叠上下文层级相同，滚动时后方的.row会覆盖在粘性元素上方。只需要给粘性元素添加z-index属性，让它们处于更高层级即可实现遮挡效果，不需要额外添加固定元素。

修改后的代码 #

CSS代码 #

html, body {
  overflow: hidden;
}

.view {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
  background-color: #EEE;
  overflow-y: scroll;
  height: 400px;
  padding: 10px;
}

.stick-header {
  position: sticky;
  top: 0px;
  background-color: #CCC;
  border-radius: 4px;
  height: 20px;
  padding: 10px;
  z-index: 1; /* 添加该行提升层级 */
}

.stick-section {
  position: sticky;
  top: 60px;
  background-color: #333;
  color: white;
  border-radius: 10px;
  height: 20px;
  padding: 10px;
  z-index: 1; /* 添加该行提升层级 */
}

.row {
  background-color: green;
  padding: 10px;
}

HTML代码（无需修改） #

<div class="view">
<div class="row">Row Content before Header</div>
<div class="stick-header">Header</div>
<div class="stick-section">Section</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="stick-section">Section</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="stick-section">Section</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="stick-section">Section</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="stick-section">Section</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
<div class="row">Row Content</div>
</div>

原理说明 #

Flex容器中的元素默认处于同一个堆叠上下文，当滚动时，后续的.row元素会因为在DOM流中位置靠后，而覆盖在粘性元素上方。通过给粘性元素设置z-index: 1，让它们的堆叠层级高于.row，就能实现滚动时粘性元素遮挡下方滚动项的效果。

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