1

私はCSSが初めてなので、この質問は非常に単純かもしれません。私はウェブサイトをレイアウトしていて、ポジショニングにこだわっています。

このサイトには、下にスクロール可能なコンテンツを含むヘッダーがある中央セクションがあります。ヘッダー div に関連する CSS は次のとおりです。

#header {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
}

今、コンテンツ div がすぐ下に続くようにしたいだけですが、その方法がわかりません。

position: relative; 
top: 0;

動作していないようです（最初は期待していました）。両方の div は同じ論理レベルにあり、中間セクションの div 内にラップされています。私はおそらく、非常に明白で簡単なものを見逃しています。

4

3 に答える 3

4

次のようなものがある場合

<header>header</header>
<main>main content</main>

この CSS を使用します。

header, main
{
    display: block; /* because <main/> is very new */
    padding: 20px;
    background: #eeeeee;
}

header
{
    background: blue;
}

ブロック要素はデフォルトで互いに下に配置されるため、これですべてです。

http://jsfiddle.net/86wX4/

于 2013-03-19T11:24:41.600 に答える
1

あなた#headerが絶対的な位置にいる理由はありますか？<div>そのスタイルを削除すると、期待どおりに s がスタックされることがわかると思います。

絶対<div>配置を指定すると、ページの流れから外れる。そのため、まだ流れの中にある要素はそこにあるとは「思わない」ため、互いに重なり合わない。

これがあなたのマークアップだとしましょう：

<div id="header">Header</div>
<div id="content">Content</div>

これらの要素を絶対に配置する場合は、 、 、および/またはスタイルを使用して配置する必要leftがtopありrightますbottom。いいえ:

#header{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 50px;
}
#content{
    position:absolute;
    width:100%;
    top:50px; //Because the header is 50px high
}

しかし

これらすべてを相対的に配置する (またはデフォルトの静的のままにする) と、とにかく好きなように積み重ねることができ、ページの幅を広げることさえできます。

お役に立てれば。

于 2013-03-19T11:30:26.153 に答える
0

ヘッダー div を絶対位置で使用する理由はありますか? 両方のdivの相対位置を使用して、互いの下に配置できます。

于 2013-03-19T11:23:14.097 に答える