Альтернатива использованию отрицательной маржи?

Я использую отрицательный запас, чтобы поместить свое изображение на задний план, однако, когда я увеличиваю масштаб, он меняет и сильно искажает изображение. При масштабировании окна справа идет вверх, из-за отрицательного поля.

Ниже приведен код, который я использую: -

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

enter image description here

EDIT:

Это то, что происходит, когда я увеличиваю слишком много из-за отрицательного поля.

enter image description here

Ответы

Ответ 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%;
}

Ответ 2

Для тех, кто ищет простую, хорошую альтернативу отрицательному полюсу:

Плохо, вызывает путаницу потока документов:

margin-top: -2px;

Хорошо. Вместо этого:

position: relative;
top: -2px;

Ответ 3

Дайте положительное значение противоположному боковому полю наряду с float (это означает, что если вы хотите переместить влево на -20px, дайте float прямо к этому div и дадите положительное значение для правого поля