环形进度条内部日期CSS定位异常问题求解

给.remainingday设置position: absolute后滚动不同步，核心原因是父容器.circularremainingtime__container没有创建定位上下文，绝对定位元素会向上遍历DOM树，找最近的position非static的祖先元素作为偏移基准，直接脱离了当前容器的文档流，自然无法跟随容器同步移动。
注释掉绝对定位后，元素回到flex纵向文档流，会排在环形进度条上方，自然无法落到环形内部。

方案1：最小改动修复（保留现有DOM结构） #

只需要调整CSS即可，不需要改JSX：

• 给外层容器添加position: relative，创建专属定位上下文，让内部绝对定位元素的偏移基准锁定为当前容器
• 放开.remainingday的绝对定位，通过偏移+transform实现完美居中，添加z-index保证文字盖在进度条上层
• 清除原有冗余样式对定位的干扰

修正后的完整CSS代码：

.circularremainingtime__container.only-desktop {
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 1.5em;
  /* 新增：建立定位上下文 */
  position: relative;

  & > p {
    margin: 0;
    margin-top: 0.5em;
    font-size: 1.2rem;
    /* 删除重复的font-weight定义，保留需要的权重即可 */
    font-weight: 500;
    color: var(--palette-red-300);
  }

  .circularprogress {
    color: var(--palette-red-300);
  }

  .remainingday {
    position: absolute;
    /* 居中定位 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -65%); /* Y轴偏移可根据实际视觉效果微调，对齐环形中心 */
    z-index: 2;
    color: #004dcf !important;
    padding: 0; /* 覆盖全局padding影响 */
    
    p{
      margin: 0;
      text-align: center;
      color: #004dcf !important;
      font-size: 8px;
      font-weight: bolder;
    }

    p:first-child{
      font-size: 13px;
      text-align: center;
    }
  }
}

注意：原代码中& > div { padding: var(--padding); }的规则会给日期容器增加多余内边距，直接删除该段规则即可，避免影响居中精度。

方案2：Grid层叠方案（无绝对定位，更稳定） #

如果不想用绝对定位，可以微调JSX结构，用CSS Grid的同格层叠特性实现居中，完全避免定位上下文问题，滚动同步更稳定：

• JSX调整：把环形进度条和日期文本包在同一个进度条容器里

<div className={'circularremainingtime__container only-desktop' + circularColor}>
  <div className="progress-wrap">
    <AS.CircularProgress
      className="circularprogress"
      style={style}
      variant="determinate"
      value={persentage}
      thickness={3}
    />
    <div className="remainingday">
      <p>{endDate.getDate()}</p>
      <p>{endDateMonth}</p>
    </div>
  </div>
  <p>{circularText}</p>
</div>

• 对应新增CSS：

.progress-wrap {
  display: grid;
  place-items: center;
}
.circularprogress, .remainingday {
  grid-area: 1 / 1; /* 两个元素放在同一个网格单元格，自动层叠居中 */
}
.remainingday {
  z-index: 2;
  color: #004dcf !important;
  p{
    margin: 0;
    text-align: center;
    color: #004dcf !important;
    font-size: 8px;
    font-weight: bolder;
  }
  p:first-child{
    font-size: 13px;
  }
}

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