1

私は次のhtmlを持っています：

<div id="container">
    <div id="pageHeader">
      <h1><span>Page Title</span></h1>
    </div>

    <div id="navigation_menu">
      <ul>
        <li id="treeslink"><a href="#">Trees</a></li>
        <li id="gardenslink"><a href="#">Gardens</a></li>
        <li id="portlink"><a href="#">Portfolio</a></li>
      </ul>
    </div> 
  </div>

navigation_menuの真下に置きたいですpageHeader。

だから私は私の.cssにこれを持っています：

#container {width:870px; margin:0 auto;position:relative;}

#pageHeader h1 
{
  position:absolute;
  width:870px;  
  margin-top:0;
  font:74px "F25_TypewriterCondensed";
  letter-spacing:-2px;
}

#navigation_menu
{
  position:absolute;
  width: 169px;
}

ただし、navigation_menuはpageHeader、の左上隅に表示されcontainerます。真下に置くことは可能ですか？

4

3 に答える 3

2

絶対測位を使用する理由がわかりません。あなたが求めているのは、実際にはデフォルトの動作です。私はあなたのCSSをこれに更新しました：

#container 
{
   width:870px; 
   margin:0 auto;
}

#pageHeader h1 
{

  margin-top:0;
  font:74px "F25_TypewriterCondensed";
  letter-spacing:-2px;
}

#navigation_menu
{
  width: 169px;
}​

フィドルをチェックして、動作中のコードを確認してください：http: //jsfiddle.net/ebgVq/

于 2012-08-21T16:13:04.643 に答える
2

あなたはいくつかの問題を抱えています、最初に、上の絶対的なポジショニングを取り除きますnavigation_menu、それはそれがその上の他のdivの「プシネス」を無視するようにします。

次に、pageHeaderをプッシュする必要があります。要素を絶対的に配置すると、コンテンツのサイズを変更したい親要素など、他のオブジェクトをその周りに流すことができなくなります。h1その中に絶対的に配置divすると、divサイズは1pxx1pxになります。

于 2012-08-21T16:13:29.983 に答える
1

高さをオンに#pageHeader h1設定してから、同じ量（たとえば、それぞれ100px）を使用してマージントップを設定すると、#navigation_menuこれで目的の結果が得られます。絶対に配置しているので、ドキュメントの流れから要素を取り除きます。ヘッダーに高さを指定すると、同じ量だけヘッダーを下にぶつけて、メニューをその下に明示的に配置できます。両方の要素が流れから外れているため、これは実際には視覚効果です。

于 2012-08-21T16:14:54.597 に答える