title: Positioning not working when use SVG image
body: <p>Trying to position the green div over SVGIcon component, but when I resize my screen then the positioning is not working properly, the green inner div moves away from the white svg image, as you see in the image below. Any help from you will be much appreciated. Thanks in advance!</p>
  <p>See the image below:</p>
  <p><a href="https://i.stack.imgur.com/3CTH3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3CTH3.png" alt="enter image description here" /></a></p>
  <p>// if I resized my screen then it look like this:</p>
  <p><a href="https://i.stack.imgur.com/VnKc0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VnKc0.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;markar-container&quot;&gt;
      &lt;button&gt;
        &lt;h1&gt;Pin&lt;/h1&gt;
        &lt;div class=&quot;markar-items&quot;&gt;
          &lt;SvgIcon class=&quot;union-layer&quot; /&gt;
          &lt;div class=&quot;color-overlay&quot;&gt;
            &lt;div class=&quot;text&quot;&gt;AA&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import SvgIcon from &quot;./icons/SvgIcon.vue&quot;;
  export default {
    name: &quot;Test&quot;,
    components: { SvgIcon },
  
    data() {
      return {
        text: &quot;Ello&quot;,
      };
    },
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  h1 {
    color: blueviolet;
  }
  
  .markar-container {
    box-sizing: border-box;
  }
  
  .markar-items {
    /* display: flex;
    align-items: center;
    justify-content: center; */
    border: 2px solid red;
  }
  
  .union-layer {
    position: relative;
    width: 80px;
    height: 80px;
    background-color: yellow;
  }
  
  .color-overlay {
    height: 50px;
    width: 50px;
    border-radius: 35px;
    background: #3ac371;
    position: absolute;
    top: 109px;
    left: 200px;
    transform: translate(-50%, -50%);
  }
  
  .text {
    position: absolute;
    left: 12px;
    top: 13px;
    font-size: 19px;
    color: white;
  }
  
  .color-overlay:hover {
    background: #9f1853;
  }
  
  &lt;/style&gt;
  
  </code></pre>