如何修复position: fixed元素滚动时布局错乱问题

问题根源 #

滚动时布局错乱的核心原因是 .inner-circle 使用了 position: fixed —— 这个定位规则会让元素相对于浏览器视口固定位置，不会跟随父容器滚动，导致圆形进度条的内圈和外圈错位。

修复步骤 #

1. 给父容器 .circular-progress 添加 position: relative，让子元素的定位参考这个父容器
2. 将 .inner-circle 的 position: fixed 改为 position: absolute，这样内圈会相对于父容器的圆心定位，不会脱离布局流

修改后的代码 #

CSS 部分

.circular-progress {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 96px;
  position: relative; /* 添加这行，作为子元素定位的参考容器 */
}

.inner-circle {
  position: absolute; /* 替换fixed为absolute */
  border-radius: 50%;
  width: 75px;
  height: 75px;
  background-color: rgb(255, 255, 255);
}

HTML 部分（结构无需修改，仅依赖CSS调整）

<div id="section-matching-score" class="collapse show">
  <div class="circular-progress" style="background: conic-gradient(rgb(10, 207, 151) 288deg, rgb(238, 242, 247) 0deg);">
    <div class="inner-circle"></div>
    <p style="color:black; z-index: 100000; margin-top: 15px;">9/10</p>
  </div>
</div>

<div style="overflow-y: scroll; height:400px;">
  scrollable div
</div>

额外优化建议 #

可以把进度文本的内联样式移到CSS中，保持代码整洁：

.circular-progress p {
  color: black;
  z-index: 100000;
  margin: 0; /* 清除默认margin，让文本更精准居中 */
}

内容的提问来源于stack exchange，提问作者Mateusz Urbański