使用負邊距的替代方法？

Question

我使用負利潤率的把我的圖片上的背景然而，當我放大到多少呢轉移和圖像扭曲到了很多。在放大右側的方框時，由於負餘量而向頂部移動。

請找我使用下面的代碼： -

<div class="platform-row" style="float: right; margin-right: 145px; padding: 2px;"> 
      <span><a href="download/index.html"> 
       <img src="assets/Box.png" border="0" /></a></span><br> 
      <div class="platform-row-box"> 
       SOME TEXT GOES HERE................... 
      </div> 

      <a href="download/index.html"> 
       <div class="getmxit">Get ABC Now</div> 
      </a> 
      <div style="background: black; margin-top: 3px; width: 181px; opacity: .8; padding: 2px"> 

       <span><a class="platform-icon apple" href="download/ios/index.html"></a></span> 
       <span><a class="platform-icon android" href="download/android/index.html"></a></span> 

      </div> 
     </div> 

CSS：

.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; 
    } 
} 

編輯：

這是當我放大會發生什麼由於負利潤率太多。

Answer 1

免責聲明：這個答案是基於什麼我想你問。有關您的問題的更具體的解決方案，請更具體地說明您要實現的目標。

它看起來像你使用負邊距和填充以補償的事實，你的圖像相對定位（默認）。爲了避免破壞你的佈局就可以實現同樣的事情用兩種方法之一：

方法1（不理想）：將目前的容器之外，並納入更廣泛的文檔上下文背景圖像。然後定位您的圖像絕對以便它不會影響你的佈局的其餘部分：

HTML 
<img class="background" src="somedir/background.png"> 
<div class="platform-row">....</div> 

CSS 
.background { 
    position: absolute; 
    top: 0; /* defining the top/left/bottom/right declarations are important! */ 
    left: 0; 
    /* bottom: 0; apply these two if you want your image to stretch and fill the entire viewport */ 
     /*right: 0; */ 
    height: 100%; 
    width: auto; 
} 

方法2（更好）：就應用背景圖像作爲background的身體（或最好是最大高度/寬度包裝）。

而不是使用利潤率您 .platform-row-box定位

HTML 
<div class="page-wrapper"> 
    <div class="platform-row">....</div> 
    <!-- other page content --> 
</div> <!-- end of page-wrapper --> 



CSS 
.page-wrapper { 
    background: transparent url('/images/background.png') 0 0 no-repeat; 
    /* fix the image in place (not supported in older browsers) */ 
    background-position: fixed; 
} 

此外，你可以簡單地使用position: fixed風格（您已經定義），但你需要定義top/right/bottom/left值。

.platform-row-box { 
    position: fixed; 
    top: 40px; 
    right: 20%; 
} 

Answer 2

給正值相反側邊緣具飄飄蕩蕩（也就是說，如果你想爲右邊緣

Answer 3

移動通過-20px左，右，以該div給予浮動和給予積極的價值對於那些誰正在尋找一個簡單的，很好的替代負保證金：

壞，導致文檔流程的混亂：

margin-top: -2px; 

好，而是：

position: relative; 
top: -2px;