将文本放在带有背景图像的div内的特定位置

Question

我有一个react应用，我正在尝试将文本放置在带有背景图像的响应div中的特定位置。当我更改设备的高度/宽度或放大时，文字不会停留在正确的位置。下面的整个图表是我的背景。

我尝试在文本中设置相对位置和固定位置，以％和％的上和左匹配CSS中的灰色矩形。

整个组成部分

  <Modal.Body>
    <Row className="textBodyHeader">
      <Col>
        <h6>PETR4, PETROBRAS PN N2 4,17</h6>
      </Col>
    </Row>
    <Row>
      <Col>
        <FormInternoCompraAgendada />
      </Col>

      <Col className="colGrafico">
        <div class="valorTotalGrafico">26,50</div>
        <div class="GainDisparoGrafico">26,50</div>
      </Col>
    </Row>
  </Modal.Body>

具有上面代码中背景图片的div

<Col className="colGrafico">
        <div class="valorTotalGrafico">26,50</div>
        <div class="GainDisparoGrafico">26,50</div>
      </Col>

我的CSS

.colGrafico {
  background-image: url("../img/compraAgendada.PNG");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
}

.valorTotalGrafico {
  color: #000;
  position: fixed;
  top: 55%;
  left: 97.5%;
  font-size: 2vmin;
  font-weight: 700;
}

.GainDisparoGrafico {
  color: #000;
  position: fixed;
  top: 33.3%;
  left: 130%;
  font-size: 2vmin;
  font-weight: 700;
}

主要组成部分。

我希望该分区的这些灰色框中有五个文本（26,50）。