title: Place texts in specifics positions inside a responsive div with background image
body: <p>I have a react app and I'm trying to place texts in specific positions in a responsive div with background image. When I change the device height/width or zoom in the texts wont stay in the correct place. The whole chart below is my background.</p>
  
  <p>I've tried setting position relative and fixed in the Texts, with Top and Left in % that matched the gray rectangles in my css.</p>
  
  <p>The whole component</p>
  
  <pre><code>  &lt;Modal.Body&gt;
      &lt;Row className="textBodyHeader"&gt;
        &lt;Col&gt;
          &lt;h6&gt;PETR4, PETROBRAS PN N2 4,17&lt;/h6&gt;
        &lt;/Col&gt;
      &lt;/Row&gt;
      &lt;Row&gt;
        &lt;Col&gt;
          &lt;FormInternoCompraAgendada /&gt;
        &lt;/Col&gt;
  
        &lt;Col className="colGrafico"&gt;
          &lt;div class="valorTotalGrafico"&gt;26,50&lt;/div&gt;
          &lt;div class="GainDisparoGrafico"&gt;26,50&lt;/div&gt;
        &lt;/Col&gt;
      &lt;/Row&gt;
    &lt;/Modal.Body&gt;
  </code></pre>
  
  <p>The div with background image from code above</p>
  
  <pre><code>&lt;Col className="colGrafico"&gt;
          &lt;div class="valorTotalGrafico"&gt;26,50&lt;/div&gt;
          &lt;div class="GainDisparoGrafico"&gt;26,50&lt;/div&gt;
        &lt;/Col&gt;
  </code></pre>
  
  <p>My CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>The main component.</p>
  
  <p><a href="https://i.stack.imgur.com/zJR8c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zJR8c.png" alt="enter image description here"></a></p>
  
  <p>I expect five texts (26,50) in these gray boxes in this div.</p>
  
  <p><a href="https://i.stack.imgur.com/QQ7nk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QQ7nk.png" alt="enter image description here"></a></p>