Eine alternative zur Verwendung von negativen margin?

Ich bin mit negativen Marge ist an Ort mein Bild auf dem hintergrund, jedoch wenn ich zu vergrößern, um viel, es verschiebt und verzerrt das Bild zu sehr. Auf Zoomen der box auf der rechten Seite geht in Richtung der Spitze wegen der negativen Marge.

Im folgenden finden Sie den code, den ich verwende:-

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

Eine alternative zur Verwendung von negativen margin?

EDIT:

Dies ist, was passiert, wenn ich zoom-in zu viel, weil die negative Marge.

Eine alternative zur Verwendung von negativen margin?

Was wollen Sie erreichen? Können Sie ein jsfiddle, wo Sie zeigen nur den code, der benötigt wird um das problem zu reproduzieren, bitte? Viele Male, während Sie ein jsfiddle für eine Frage ich bin in der Lage das problem zu lösen mich
Wie bereits erwähnt ist eine jsfiddle würde helfen, eine Menge. Auch, warum sind Sie mit dem inline-styling zusammen mit dem CSS?
Welchen browser haben Sie diese miterlebt und was die Größe der Fenster wurden Sie mit? Eine Geige würde nützlich sein, mit links zu Ihren Bildern im besonderen.
Hi prüfe mein edit.

InformationsquelleAutor vini | 2013-12-12

  1. 7

    Disclaimer: Diese Antwort beruht auf dem, was ich glaube, du bist gefragt. Für eine genauere Lösung zu deinem problem, bitte etwas konkreter mit Bezug auf das, was Sie zu erreichen versuchen.

    Sieht es aus wie Sie mithilfe von negativen margins und padding, um einen Ausgleich für die Tatsache, dass dein Bild ist relativ positioniert werden (standardmäßig). Um zu vermeiden, brechen Sie Ihr layout können Sie erreichen die gleiche Sache mit einem der beiden Ansätze:

    Methode 1 (nicht ideal): Bewegen Sie Ihre hintergrund-Bild, das außerhalb seines aktuellen container und in den größeren Dokument Kontext. Dann positionieren Sie Ihr Bild unbedingt so, dass es bewirkt nicht den rest Ihres layout:

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

    Methode 2 (besser): Nur für das Hintergrundbild als background auf den Körper (oder vorzugsweise eine maximale Höhe/Breite wrapper).

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

    Auch, anstatt Margen zu positionieren, Ihre .platform-row-box, können Sie einfach die position: fixed Stil (die Sie bereits festgelegt haben), aber Sie brauchen, um zu definieren, die top/right/bottom/left Werte.

    .platform-row-box {
    position: fixed;
    top: 40px;
    right: 20%;
}
    Hi ich versuchte es mit der zweiten Methode immer noch den Platz an der Spitze wie in der bearbeiteten Frage.
    Was meinst du mit 'zoom in'?
    Also, wenn der Benutzer die Ansichten in den kleinen Bildschirm wie ein ipad oder iphone bekomme ich den Bildschirm, der ist oben in meinem edit

    InformationsquelleAutor monners

  2. 5

    Für diejenigen, die für eine einfache, gute alternative zu negativen margin -:

    Bad, Ursachen Belegfluss Verwirrung:

    margin-top: -2px;

    Gute Statt:

    position: relative;
top: -2px;

    InformationsquelleAutor Jack Nicholson

  3. 0

    Geben Sie einen positiven Wert zum gegenüberliegenden Rand entlang mit Schwimmer(heißt, wenn Sie wollen, bewegen Sie sich nach Links von 20px, geben Sie schweben direkt auf das div und geben positive Wert für den rechten Rand

    InformationsquelleAutor user3118418

Schreibe einen Kommentar