0

私は内部にdiv callad subHeaderを持っています:

1 - サブヘッダー左

2 - サブヘッダー右

ブラウザに表示すると、subHeaderLeft/right は subHeader の外にあり、内部にはありません。

subHeaderLeft/right が subHeader の外側にあるのはなぜですか?

デモ jsFiddle を見ることができ ます。

助けてくれてありがとう。

html コード:

<div id="subHeader">
      <div id="subHeaderLeft"></div>
      <div id="subHeaderRight"></div>
</div>

css code:

#subHeader{
      width: 200px;
      height:100px;
      Helvetica, sans-serif;
      margin: 10px auto;
      border: 3px solid #6fb2e6;
      background: pink;
      }    

#subHeaderLeft{
      position:absolute;
      left:0;
      top:0;      
      width: 70px;
      height:100px;
      margin: 0;
      border: 3px solid #6fb2e6;
      background: white;
      }
#subHeaderRight{
      position:absolute;
      right:0;    
      top:0;      
      width: 30px;
      height:100px;
      margin: 0;
      border: 3px solid #6fb2e6;
      background: yellow;
      }

</p>

4

2 に答える 2

3

何が起こっているかというと、絶対配置された要素が、直接の親ではなく body 要素に関連して配置されているということです。

相対配置のページ要素を使用すると、その中に子要素を絶対的に配置するためのコントロールが提供されます。

だから追加するだけ

position:relative

親 #subHeader に。

このようにして、子の絶対配置がその親で機能します。

http://jsfiddle.net/qjfUk/9/

于 2012-07-13T11:26:58.687 に答える
0

position:relative; を追加するだけです。#subHeader へ

#subHeader{
      position:relative;
      width: 200px;
      height:100px;
      Helvetica, sans-serif;
      margin: 10px auto;
      border: 3px solid #6fb2e6;
      background: pink;
      }
于 2012-07-13T11:27:19.663 に答える