CSS position:sticky异常求助：滚动时黄块覆盖蓝块

云上老周

2026-8-3

解决Sticky元素滚动时互相覆盖的问题

问题描述

向下滚动页面时，黄色方块（.left__side）会覆盖蓝色方块（.box）。两者均设置了position: sticky，预期滚动时两个方块都固定在顶部且互不覆盖，仅右侧橙色方块（.oikea__box）可滚动。

页面效果截图

问题原因

定位位置冲突：蓝色方块和黄色方块的top值均设为0，滚动时抢占同一顶部区域，导致重叠。
堆叠层级问题：默认堆叠规则下，子容器内的sticky元素层级高于外部同级元素，黄色方块因此覆盖蓝色方块。

解决方案

通过调整定位位置和堆叠层级即可解决：

为黄色方块设置与蓝色方块高度一致的top值，避免位置重叠
为蓝色方块添加更高的z-index，确保它在视觉层级上处于上方

修改后的代码

CSS部分

.box {
  height: 100px;
  border: 1px solid black;
  width: 100%;
  background-color: blue;
  position: sticky;
  top: 0;
  z-index: 10; /* 提升堆叠层级，确保蓝色方块在上方 */
}

.both {
  display: flex;
}

.left__side {
  height: 200px;
  border: 1px solid black;
  width: 100px;
  background-color: yellow;
  position: sticky;
  top: 100px; /* 与蓝色方块高度匹配，固定在蓝色方块下方 */
}

.right__side {
  border: 1px solid black;
  width: 100%;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.oikea__box {
  height: 100px;
  width: 100px;
  border: 1px solid red;
  background-color: orange;
}