title: Position of button changes when zooming IN and OUT : CSS
body: <p>I have a button which should be places in right most corner, so I used CSS for that, in 100% zoom it works fine but when I give 75% zoom Out, it shows the button in middle, I tried giving <code>position</code> <code>fixed</code> / <code>absolute</code> / <code>relative</code>, but nothing worked.</p>
  <p>Can someone help me please.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn-primary {
      background: transparent;
      border-color: #2980b9;
      color: #2980b9;
      margin-left: 653px;
      position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="btn btn-primary btn--rounded" id="AnchroTagForButton" name="submit" type="button" title="btn action"&gt;&gt;&gt;&gt; Show Components&lt;i class="btn-icon fa fa-arrow-right"&gt;&lt;/i&gt;&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Images while Zooming in and Out</p>
  <p>100% ZOOM IN</p>
  <p><img src="https://i.stack.imgur.com/jWAXW.png" alt="100% ZOOM IN" /></p>
  <p>67% ZOOM IN</p>
  <p><img src="https://i.stack.imgur.com/7NUmv.png" alt="67% ZOOM IN" /></p>