1

これは、ヘッダーのレイアウトを設計した方法です

<div id="DivHeader">
<div id="DivTop">
</div>
<div id="DivBottom">
</div>
</div>

最初は の top プロパティをDivBottom35pxに設定していDivTopました。
したがって、追加した後、のトップDivBottomは新しい子（DivTop）からDivTop's height+として計算されましたDivBottom's top。結果、このようにレイアウトが崩れてしまいました。DivTopに影響を与えずに配置する必要がありDivBottom's Topます。

[注: div に絶対配置を使用しませんでした。その場合、margin:0 auto が機能しないためです。]

4

2 に答える 2

0

これが予想される動作である相対位置を使用しています。相対位置に関する W3 を参照してください。

ボックスが通常のフローに従ってレイアウトされるか、フローティングされると、この位置に対して相対的に移動することがあります。これを相対位置と呼びます。

したがって、相対的に配置された要素の上に何かを挿入すると、最初に「通常の流れ」に従って配置され、次に CSS に従って再配置されます。

position指定した動作が必要な場合は、を別の値に変更する必要があります。

于 2013-01-06T11:18:11.453 に答える
0

絶対配置を使用する必要があります。

#first
{
  position:absolute;
  left:50%;
  margin-left:-5px; /* half the width value */
  width:10px;
  height:10px;
  background-color:yellow;
}

http://jsfiddle.net/3u3gz/1/

于 2013-01-06T11:21:34.653 に答える