title: An alternative to using negative margin?
body: <p>I am using negative margin's to place my image on the background however when i zoom to much it shifts and distorts the image to a great deal. On zooming the box on the right goes towards the top because of the negative margin.</p>
  
  <p>Please find below the code i am using:-</p>
  
  <pre><code>  &lt;div class="platform-row" style="float: right; margin-right: 145px; padding: 2px;"&gt;
              &lt;span&gt;&lt;a href="download/index.html"&gt;
                  &lt;img src="assets/Box.png" border="0" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;br&gt;
              &lt;div class="platform-row-box"&gt;
                  SOME TEXT GOES HERE...................
              &lt;/div&gt;
  
              &lt;a href="download/index.html"&gt;
                  &lt;div class="getmxit"&gt;Get ABC Now&lt;/div&gt;
              &lt;/a&gt;
              &lt;div style="background: black; margin-top: 3px; width: 181px; opacity: .8; padding: 2px"&gt;
  
                  &lt;span&gt;&lt;a class="platform-icon apple" href="download/ios/index.html"&gt;&lt;/a&gt;&lt;/span&gt;
                  &lt;span&gt;&lt;a class="platform-icon android" href="download/android/index.html"&gt;&lt;/a&gt;&lt;/span&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .platform-row {
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      margin-top: -530px;
      margin-left: 700px;
  }
  
      .platform-row .platform-row-box {
          color: white;
          font-size: 14px;
          margin: 0 auto;
          width: 181px;
          opacity: .8;
          margin-top: -170px;
          position: fixed;
      }
  
  @media screen and (max-width: 640px) {
      .platform-row {
          padding-right: 55%;
      }
  }
  
  @media screen and (max-width: 479px) {
      .platform-row {
          margin-top: 40px;
          padding-right: 35%;
      }
  }
  
  .platform-icon {
      -webkit-transition: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      transition: opacity 0.2s;
      /**background-image: url("platform_icons-14a66f5cbf10a328f7b38e6070c26e62.png");**/
      background-image: url("Home_Get.png");
      display: inline-block;
      height: 25px;
      width: 25px;
      margin-right: 0px;
      opacity: 1;
  }
  
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      .platform-icon {
          background-image: url("platform_icons%402x-dfed2cc115fa8b344e08c9072408095a.png");
          background-size: 454px 88px;
          -webkit-background-size: 454px 88px;
      }
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/SRA8v.png" alt="enter image description here"></p>
  
  <p>EDIT:</p>
  
  <p><strong>This is what happens when i zoom in too much because of the negative margin.</strong></p>
  
  <p><img src="https://i.stack.imgur.com/9MBFH.png" alt="enter image description here"></p>