Une alternative à l'utilisation de la marge négative?

Je suis en utilisant négative de la marge pour placer mon image sur le fond cependant, quand je zoom pour beaucoup elle se déplace et déforme l'image de beaucoup. Sur le zoom de la zone sur la droite pour aller vers le haut en raison de la marge négative.

Veuillez trouver ci-dessous le code que j'suis en utilisant:-

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

Une alternative à l'utilisation de la marge négative?

EDIT:

C'est ce qui arrive quand je zoom en trop à cause de la marge négative.

Une alternative à l'utilisation de la marge négative?

source d'informationauteur vini

  1. 7

    Avertissement: Cette réponse est fondée sur ce que je pense que vous demandez. Pour une solution spécifique à votre problème, merci d'être plus précis quant à ce que vous essayez d'atteindre.

    On dirait que vous êtes en utilisant des marges négatives et de rembourrage pour compenser le fait que votre image est en position relative (par défaut). Pour éviter de casser votre disposition, vous pouvez réaliser la même chose avec l'un des deux approches:

    Méthode 1 (pas idéal): Déplacer votre image d'arrière-plan à l'extérieur de son conteneur actuel et dans la plus large du document de contexte. Ensuite, la position de votre image absolument de sorte qu'il n'affecte pas le reste de votre mise en page:

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

    Méthode 2 (mieux): il suffit d'appliquer l'image d'arrière-plan comme un background de l'organisme (ou de préférence un max de hauteur/largeur de l'emballage).

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

    Aussi, au lieu d'utiliser les marges de la position de votre .platform-row-boxvous pouvez simplement utiliser la position: fixed style (que vous avez déjà définis), mais vous aurez besoin de définir la top/right/bottom/left valeurs.

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

    Pour ceux qui sont à la recherche d'un simple, une bonne alternative à la marge négative:

    Mauvaisles causes de la circulation des documents de la confusion:

    margin-top: -2px;

    BonneAu Lieu De:

    position: relative;
top: -2px;
  3. 1

    Donner une valeur positive à l'opposé de la marge avec flotteur(signifie que si vous voulez déplacer vers la gauche par -20px, donner flotteur droit de div et de donner une valeur positive pour la marge de droite