0

これが私のスタイルシートコードです

#topwrapper {
    background: url(images/orangebg.jpg) repeat-x top; 
    height: 502px;
}

#mainwrapper {
    background:url(images/bluebg.jpg) repeat;
}

#maincontent {
    margin: 0 auto; 
    width: 961px; 
    background-color:#F0EFEF;
    position: relative;
    margin-top: -312px;
}

maincontentdivをorangedivに移動したいのですが、bluebg.jpgが一緒に表示されます（orangebg.jpgを短くします）。-topを使用してみたとき：312px; 負のマージンの代わりに、＃maincontentの下にスペースを追加しました。

ページのコードは次のとおりです

<div id="topwrapper"></div>
<div id="mainwrapper"><div id="maincontent">test test</div></div>

jsfiddleで表示jsfiddle.net/bdh2a-margin-topを削除します：-312px; その上に灰色のボックスを表示するには、オレンジ色の背景が必要です。

4

3 に答える 3

0

多分あなたはdivに設定margin-top: -312px;することができますか？mainwrapper

于 2012-07-17T16:56:19.600 に答える
0

次のようにHTMLを再配置します。

<div id="mainwrapper">
<div id="maincontent"><p>text text</p></div>  
<div id="topwrapper"></div>
</div>

次に、このCSSセットアップを使用します（もちろん、高さなどを調整します）。

#mainwrapper{
height:100%;
background-color:#FF4200;
width:100%;
}

#topwrapper {
background-color:#1B00FF;
height:100px;
min-width:100%;
margin:0 auto;
position:absolute;
top:0;
z-index:0;
}

#maincontent {
margin: 0 auto;
padding:20px;
top:20px;
background-color:#ccc;
position: relative;
color:#000;
z-index:1;
width:80%
}

このjsfiddleをチェックしてください：http：//jsfiddle.net/imakeitpretty/yqnfk/オレンジがないとオレンジが拡大するのを見ることができないので、そこにはギリシャ語のテキストがたくさんあります。「テキストテキスト」はそれを行うのに十分ではありません。

于 2012-07-17T17:02:11.747 に答える
0

解決策を見つけました!!

#topwrapper {
    background: url(images/orangebg.jpg) repeat-x top; 
    height: 502px;
}

#mainwrapper {
    background:url(images/bluebg.jpg) repeat;
    float: left;
    width: 100%;
    display: block;
    position: relative;
}

#maincontent {
    width: 961px; 
    background-color:#F0EFEF;
    position: relative;
    margin-top: -312px;
    margin-left: -480px;
    position: relative;
    float: left;
    left: 50%;
}

ページのコードは同じままです

于 2012-07-19T15:01:49.930 に答える