圆形进度条位置

Question

有一个圆形进度条。 此条打印剩余天数，计算天差。 但是我在调​​整这个栏的位置时遇到了麻烦。

我正在尝试做；

到目前为止我能做的；

html

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

css

.circularremainingtime__container.only-desktop {
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 1.5em;

  & > p {
    margin: 0;
    font-weight: 600;
    margin-top: 0.5em;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--palette-red-300);
  }

  & > div {
    padding: var(--padding);
  }
  .circularprogress {
    color: var(--palette-red-300);
  }

  .remainingday {
    //position: absolute;
    color: #004dcf !important;
    padding-top: 5px;
    
    p{
      margin: 0;
      text-align: center;
      color: #004dcf !important;
      font-size: 8px;
      font-weight: bolder;
    }

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

当我将剩余日期类设置为绝对时，我可以得到我想要的图像。 但是当我滑动屏幕时，日期根本不会改变。 这就是我评论那条线的原因。

Answer 1

你需要使用position: absolute; top:0px; position: absolute; top:0px; 为. circularprogress 在你的风格中. circularprogress ，因为你正在做的是渲染 div 旁边的元素，这就是它显示在下面的原因。

干杯。