絶対：下が動作しません

Question

私はCSSコードがあります。 なぜ "bottom：0"は "position：relative;" 私が「position：relative;」をあきらめたら"bottom："は動作しますが、 "width：930px;"ではなく "float：left"と "float：right"が動作します。申し訳ありません 私の悪い英語

あなたがメインに position:relativeを設定しているときためです

<style type="text/css"> 
#main { 
    position: relative; 
    width: 930px; 
    padding:10px; 
    margin:0 auto; 
} 

#left { 
    position:absolute; 
    left:0; 
} 

#right { 
position:absolute; 
right:0; 
} 

#bottom { 
    position: absolute; 
    bottom:0; 
} 
</style> 

<div id="main"> 
    <div id="left"> 
     Left 
    </div> 
    <div id="right"> 
     Right 
    </div> 
    <div id="bottom"> 
     Bottom 
    </div> 
</div> 

Answer 1

、その後、position:absoluteは親へ相対になります。 #main divには高さが設定されていないため、#bottomがページの下部に表示されません。

Answer 2

これは方法ではありません。そのようなタイプのレイアウトにはfloatを使用してください。

bottom:0が正常に動作しますが、あなたのメインのdoesnt以来され、バックあなたの質問に来て、あなたがそれを見ていない、高さを持って、

、#mainため

#main 
    { 
     position: relative; 
     width: 930px; 
     padding:10px; 
     margin:0 auto; 
     height:200px; 
    } 

これを行う編集：

#main { 
    position: relative; 
    width: 930px; 
    padding:10px; 
    margin:0 auto; 
} 

#left { 
    position:absolute; 
    left:0; 
    top:0; 
} 

#right { 
position:absolute; 
right:0; 
top:0; 
} 

#bottom { 
    left:0; 
    position: absolute; 
    bottom:-20px; 
} 

が、私はこれをお勧め習慣は absoluteは、他の要素のpositionを考慮していないので、#leftは、より多くの高さを持っている場合、このコードが破損します（私は以前、このレイアウトはfloatによって処理されるべきではないと述べました）。

私があなただったら、私はこの、

#main { 
    position: relative; 
    width: 930px; 
    padding:10px; 
    margin:0 auto; 
} 

#left { 
    float:left; 
} 

#right { 
    float:right; 
} 

#bottom { 
    clear:both; 
}