のdiv私はDIVパターンに従ってた

Question

をオーバーフロー：

<div id="red"> 
    <div id="green"> 
     <div id="blue"></div> 
     <div id="blue"></div> 
    </div> 
</div> 

赤*：絶対

*緑色：副パネル位置：絶対

*ブルー全ページ、位置を集中します。サブパネルの位置：絶対！

なぜ青いパネルがオーバーフローしてから緑色のパネルになるのですか？私は青いパネルの高さを使用したくないですか？

Answer 1

あなたは高さとオーバーフローを設定することができます。緑に隠された、青などの任意の子供を隠すべきです。しかし、青にはposition:absoluteプロパティがあるので、それらの親をオーバーフローさせることができます。あなたが内に隠れていたい場合は、position:relativeまたは絶対以外の他のポジションに変更する必要があります。

Answer 2

position: absoluteの要素はレイアウトフローから取り出されるため、他の要素の位置には影響しません。だから、内側のdivにposition: absoluteがあるdivを内部に持つコンテナがある場合、その高さは親に通知されず、明示的に高さを指定しない限り、コンテナは空として動作します。

サイドノート：IDは一意である必要があります。blueと同じIDを持つ2つの要素を使用することはできません。代わりにクラスを使用してください。