0

私はいくつかのdivを持っており、そのうちの1つは他の2つの上にオーバーレイされています。したがって、下部のdivには、次のようなものを使用しました（CSS）：

position:relative;
top:-200px;

しかし今、私はページの下部に空の200ピクセルが残っています。そのオーバーフローをカット/削除するにはどうすればよいですか？完全なCSSコードは次のとおりです。

div.headertop
{
    background-image:url('images/bkb.png');
    background-repeat:repeat;
    width: 1000px;
    height:200px;
    background-color: black;
    color:white;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
div.headerbottom
{
    background-image:url('images/bkg.png');
    background-repeat:repeat;
    background-position:bottom; 
    width: 1000px;
    height:125px;
    position:relative;
    margin-left: auto;
    margin-right: auto;
}
div.headerlogo
{
    background-image:url('images/bkw.png');
    background-repeat:repeat;
    width: 800px;
    height:200px;
    position:relative;
    top:-200px;
    margin-left: auto;
    margin-right: auto;
}
div.content
{
    background-image:url('images/bkg.png');
    background-repeat:repeat;
    background-position:top; 
    width: 1000px;
    min-height:500px;
    position:relative;
    top:-200px;
    margin-left: auto;
    margin-right: auto;
}
div.footer
{
    background-image:url('images/bkb.png');
    background-repeat:repeat;
    width: 1000px;
    height:100px;
    line-height:100px; 
    background-color: black;
    position:relative;
    top:-200px;
    color:white;
    display: block;
    margin-left: auto;
    margin-right: auto;
    color: white;
    text-align: center;
}

HTML本文コード：

<body>
        <div id="back">
            <div class="headertop">
                Hello!
            </div>
            <div class="headerbottom">
            </div>
            <div class="headerlogo">
                <a href="index.html"><img border="0" src="images/logo.png" alt="Future Me - Home"/></a>
            </div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing...
            </div>
            <div class="footer">

            </div>
        </div>
    </body>
4

2 に答える 2

2

margin-top: -200pxを使用する代わりに試してくださいtop: -200px。

于 2013-01-10T11:27:18.743 に答える
1

drmonkeyninjaは正しいです！ただし、を適用するだけで、margin-topそれ.content以外の場合は表示され.headerlogoません。また、drmonkeyninjaによって提案された修正を適用するときに削除topします-そのままにしておくと、フッターがページの下部に強制されることはありません（もちろんこれがあなたの意図でない限り！）.footertop

=） color: white;に対して重複していることにも気づきました.footer

于 2013-01-10T11:36:17.480 に答える