web-dev-qa-db-ja.com

負のマージンを使用する代わりに？

負のマージンを使用して画像を背景に配置していますが、ズームを大きくすると、画像が大きくずれて歪んでしまいます。ズームすると、マージンが負になるため、右側のボックスが上に向かって移動します。

私が使用しているコードの下を見つけてください：-

  <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

編集：

これは、マージンが負であるためにズームインしすぎると発生します。

enter image description here

htmlcssmargin
14
vini

免責事項：この回答は、あなたが求めていると思うことに基づいています。あなたの問題に対するより具体的な解決策については、あなたが達成しようとしていることに関してより具体的にしてください。

画像が比較的配置されているという事実を補うために、負のマージンとパディングを使用しているようです（デフォルト）。レイアウトを壊さないようにするには、次の2つの方法のいずれかで同じことを実現できます。

方法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%;
}
9
monners

負のマージンに代わるシンプルで優れた代替手段を探している人のために：

悪い、ドキュメントフローの混乱を引き起こします：

margin-top: -2px;

良い代わりに：

position: relative;
top: -2px;
9
Jack Nicholson

Floatと一緒に反対側のマージンに正の値を指定します（つまり、左に-20px移動する場合は、floatをそのdivに右に指定し、右マージンに正の値を指定します

0
user3118418