如何禁用位置固定的 div 的垂直滚动

Question

我有以下 HTML && CSS 布局：

.circular-progress {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 96px;
}

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

<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>

问题是当我向下滚动时它会破坏我的布局？我该如何解决？

Answer 1

您只需将

position: fixed

替换为

position: absolute

即可按预期工作。

.circular-progress {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 96px;
}

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

<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>