私の位置の絶対的な子は、その相対的な親ではなく、ブラウザのウィンドウに対して相対的に配置されるのはなぜですか？

Question

私はこれらの2つのdivを1つ別のdiv内に持ち、スタイルを定義しました。カプセル化することは相対的であり、子供は絶対的です。

子供は外側のdivの左上隅の#RightSectionに従って配置されるはずですか？

代わりに、ブラウザのウィンドウに応じて、それをやっていますか？

 <div id="RightSection"> 
      <div id="Panels"> 

      </div> 
     </div> 

#RightSection 
{ 
    position: relative; 
} 

#Panels 
{ 
    position: absolute; 
    background-color: Blue; 
    width: 100px; 
    height: 100px; 
    z-index: 9000; 
} 

Answer 1

相対配置された要素の絶対位置は、あなたが記述したものを実行するはずですが、常にサポートされている動作ではありません。どのブラウザを使用していて、どのDTDを提供していますか？

詳細はhttp://www.brainjar.com/css/positioning/default4.aspを参照してください。それはまたあなたのブラウザでそれが動作するかどうかを確認できるように、位置のデモを持っています。

これはIE6では動作しないことが確認できます。私は仕事中に他のブラウザを保証することはできません。簡単なオンライン検索では、この問題がIE7にも存在すると考えられ、IE7モードでレンダリングされている限り、IE8の問題になると考えられます。

Answer 2

私は絶対配置された要素の上と下のcssパラメータを宣言しなければ、上の親を無視してページの本体にジャンプするように見えることも発見しました。

はちょうど

#Panels 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: Blue; 
    width: 100px; 
    height: 100px; 
    z-index: 9000; 
} 

あなたがそれらのデフォルトのパラメータに追加したら、それはうまくなっているはずです、それが助けかどうかを確認し、その上部と左のパラメータを与えてみてください。