2

なぜそれが起こっているのかわからない小さな問題があります。いわゆる「mainWrapper」と呼ばれる 2 つの div ラッパーがあり、背景画像と「loginWrapper」と呼ばれるこの div の子があります。ログインWrapperを上から15%に配置したいのですが、単純に余白を足すと、親div(mainWrapper)の余白も変わってしまうようです。

なぜこれが起こっているのか、どうすれば修正できるのかを誰かに説明してもらえますか?

コード：

HTML:

<div id="mainWrapper">
    <div id="loginWrapper">
        <h:graphicImage id="logo" alt="spotted deluxe" url="resources/images/logo.png" />
    </div>
</div>

CSS:

body,html{
    height:100%;
}

body {
    margin:0;
    background-color: green;
    background: url(../images/backround_red.png) no-repeat center center fixed;
    background-size: cover;
}

div#mainWrapper {
    text-align: center;
    margin: auto;
    width:70em;
    height:100%;
    background: url(../images/header.jpg) no-repeat center center fixed;
    background-size: cover;
    padding-left:4em;
}

div#loginWrapper {
    /*margin-top: 15%;*/
}

img#logo {
    display: inline;
}
4

2 に答える 2

2

これはマージンの崩壊の特殊なケースです。それを防ぐためのいくつかのオプションは次のとおりです。

  1. 親 div に 1px の padding-top または border-top を追加します
  2. 親 div に新しいブロック フォーマット コンテキストを確立させます(たとえば、overflow: hidden を追加するか、表示を display: table に変更します)。
  3. 親 div に、人気のあるMicro Clearfix ハックのように、display: table を持つ :before 疑似要素を追加します。
于 2013-06-30T17:37:41.253 に答える
2

はい、親にマージンを追加します。代わりに位置を試してください。\

 div#mainWrapper {
   position: relative;
 }

div#loginWrapper {
    position: relative;
    top: 15%;
}
于 2013-06-30T17:06:52.480 に答える