如何让含多层SVG的div滚动时固定在页面顶部？

问题根源 #

1. 设置sticky的.child容器无明确宽高，内部SVG用absolute脱离文档流导致容器坍缩，sticky属性无法正常触发。
2. 父容器.graphic的position: relative与sticky定位逻辑冲突，初始居中布局未适配sticky的行为特性。

修改后的CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.child {
  position: sticky;
  top: 0;
  /* 匹配SVG尺寸，避免容器坍缩 */
  width: 150px;
  height: 150px;
  /* 作为SVG绝对定位的参考容器 */
  position: relative;
}

.triangle, .circle, .rectangle {
  position: absolute;
  /* 确保SVG在容器内完全叠加对齐 */
  top: 0;
  left: 0;
}

section {
  height: 100vh;
}

.one {
  background: rgb(72, 72, 171);
}

.two {
  background: pink;
}

.three {
  background: orange;
}

关键修改说明 #

• 给.child设置与SVG一致的宽高，保证容器有实际占位，让sticky属性能够正常触发固定效果。
• 为.child添加position: relative，作为内部绝对定位SVG的参考容器，维持图形的叠加布局。
• 移除.graphic的position: relative，避免干扰sticky的定位逻辑，同时保留flex布局实现初始状态下的居中效果。
• 给所有SVG设置top: 0; left: 0;，确保它们在.child容器内完全对齐叠加。

效果验证 #

初始状态下，叠加SVG会在section.one的中央位置；向下滚动页面时，SVG元素会固定在视口顶部，直到section.one完全滚出视口后才会跟随页面继续移动。

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