नकारात्मक मार्जिन का उपयोग करने का एक विकल्प?

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> 

सीएसएस:

.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 (या अधिमानतः एक अधिकतम ऊंचाई/चौड़ाई के रूप में पृष्ठभूमि चित्र लागू आवरण)।

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

इसके अलावा, बजाय अपने .platform-row-box स्थिति मार्जिन का उपयोग कर के, आप बस 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;