title: Keep popup in the same position on 100% and 80% zoom levels on browser
body: <p>I have a popup that is moving slightly at different zoom levels on the browser. I would like it to be at the same spot irrespective of whether the user is on 100% zoom or 80% zoom.</p>
  <p>Here is how it currently looks at 100% zoom</p>
  <p><a href="https://i.stack.imgur.com/vu5rv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vu5rv.png" alt="100% Zoom" /></a></p>
  <p>Here is how it looks at 80% zoom</p>
  <p><a href="https://i.stack.imgur.com/Z9HiJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z9HiJ.png" alt="80% Zoom" /></a></p>
  <p>The popup is moving further away from the <em>Retirement Projection</em> text on the right</p>
  <p>Here is my code for the popup</p>
  <pre><code>.savings-tip {
    background-color: #1a202c;
    box-shadow: 0 2px 20px 8px rgba(0, 0, 0, 0.05);
    margin-top: 445px;
    width: 35%;
    position: absolute;
    margin-left: 515px;
    height: 230px;
    padding: 0%;
  }
  </code></pre>
  <p>Here is a stackblitz example of the basic parent(popup-wrap) and popup</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-jhpbg3?file=src/app/app.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-jhpbg3?file=src/app/app.component.html</a></p>