title: Text over image in css with variable position
body: <p>I have a set of divs (11 of them), 8 of them with an image and 3 of them with ':'.</p>
  
  <p><a href="https://i.stack.imgur.com/Vfljg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vfljg.png" alt="enter image description here"></a></p>
  
  <p>all 11 boxes are inside a class "timer".
  Something like this:</p>
  
  <pre><code>&lt;div class="timer"&gt;
    &lt;div&gt;&lt;img&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img&gt;&lt;/div&gt;
    &lt;div&gt;:&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I added text over image by using p tags inside each div and using this code on css:</p>
  
  <pre><code>.text{
  position: absolute;
  left: 85px;
  top: 185px;
  }
  </code></pre>
  
  <p>But on resisizing the window, the boxes move but the text stays. How can I make the text move along with the boxes?</p>