div浮動体に対する相対位置を持つdiv

浮動小数点の右または左のdivが、相対位置を持つdivの上にないか、最後のものが後に宣言されたときに背景色で定義される理由がわかりません。ここでdiv浮動体に対する相対位置を持つdiv

はhtmlです：

<html> 
<body> 
    <div class="container"> 
     Main container <br/><br/> 

     <div class="header">This is the header</div> 
     <div class="text-right">Right text</div> 
     <div class="footer">This is the footer</div> 
    </div> 
</body>

そして、ここでは、CSSです：

.header { 
    background-color:blue; 
    border: solid; 
    color: white; 
    border-color:black; 
    height: 100px; 
} 

.text-right{ 
    float: right; 
    border: solid; 
    background-color: green; 
} 

.container{ 
    padding: 10px; 
    border: solid; 
} 

.footer{ 
    padding-top: 50px; 
    border: solid; 
    background-color: yellow; 
    position: relative; 
}

私は.clear使用できることを知っている：この問題を修正するために、両方のルールをが、私の主なポイントは：バックグラウンドカラーや位置またはその両方を.footerルールで設定すると、float divはフッターの下にあるのはなぜですか？

ありがとうございました！

出典

2011-12-22 Samuel

同じ問題を示す最小限のJSFiddleの例があります：http://jsfiddle.net/5Kefa/5/ – KajMagnus

、記事の最後に、zオーダー内部作業についての著者の話を、この非常に良いpostを読んだだけでなく、あなたが詳細を知りたい場合は、this next one will be a much more detailed article

キーポイントは、ということであると言うものの要素が置かれているz軸の順序。

私たちはどんなのzインデックス値を指定しない場合は、次のように、バック遠いに最も近いから、ユーザーに順番を積み重ねるデフォルトは次のとおりです：
1. Positioned elements, in order of appearance in source code 
2. Inline elements 
3. Non-positioned floating elements, in order of appearance in source code 
4. All non-positioned, non-floating, block elements in order of source code 
5. Root element backgrounds and borders 
ここ

は、著者が言うことです

わかりましたように、配置された要素（1）は、常に配置されていない要素（3-4）の上にあります。 divをちょうどfloatのプロパティで置き換えた場合、この要素はサーフェス上に「配置」されません。この場合

、第二の要素、相対プロパティ値を持つ位置している私のフッターdivは、以前の1の上部になりますちょうど私がfloatdiv財産の後、またはのでclear: bothプロパティを追加しないではありません最後の要素は浮動要素の後に追加されますが、配置されているためです。

powerbuoyと同様に、float要素の相対的な位置を浮動要素のスタックの先頭に追加できるように設定する必要があります。しかしそれだけでは不十分です。これらの2つの要素は同じレベルにあり、両方がお互いに交差しているため、最初にどちらが最初になるのかをエンジンに伝えなければなりません。なぜなら、パワーブイ。

私はあまり良い作家ではありません。このため、前に述べた参考資料を読むことを強くお勧めします。私はあなたがその事件について非常に深い説明をすると思います。

出典

2011-12-24 16:16:44 Samuel

私自身の質問を受け付けて申し訳ありませんが、これは正しい答えだと思います。 – Samuel

（この詳細な回答を投稿してくれてありがとう！） – KajMagnus

http://jsfiddle.net/wxMhx/。うーん、 'position：relative;'を 'id = text-right'に追加すると' id = footer'が 'text-right'の上に現れます。フローティングelemは現在 'position：relative'を持っていますが、フローティングelemと' id = footer'の両方が配置されています。だからルール1を適用する必要がありますか？ - **しかし**浮動要素はソース内で最初に出現するので、あなたの例では 'id = footer'（ルール1による）の上にスタックする必要がありますか？それではなぜ、 'id = text-right'が' footer'によって隠されているのでしょうか、変です。（これはz-indexルールが削除されています）（Google Chrome 19） – KajMagnus

の後にフッタがとなっているので、text-rightはテキストの右上に表示されます。

http://jsfiddle.net/wxMhx/

編集：この問題を回避するには、テキストの右のzインデックス（および静的以外の位置）を与えることができますうーん...いやそれは完全に間違っています。あなたがポジションを削除すると：relative;フッタのテキストの右側に表示されます。 TBH私は確信していませんなぜが起こる。しかしどちらの場合でも、解決策は相対的な位置を取り除くことです。フッターから削除するか、テキストの右側に追加します（zインデックスも同様）。

出典

2011-12-22 13:47:45 powerbuoy

あなたの時間をありがとう...私はウェブ上で多くを読んで、この文を見つけました： "そうこの振る舞いは最初にそれを浮かべて、その場所の他の要素に影響を与え、他の要素の位置に再び影響を与えることなく、それを新しいシフト位置に移動することを意図しています。あなたが言ったことで、私が理解しているのは、相対位置を持つ別のdivが続くdiv floatを配置すると、背景色が設定されている場合、前のものを隠すことになります。それは一般的な状況ですか、何か混乱しましたか？ – Samuel

背景画像がない場合でも、フッターの後ろにテキストの右端がありますが、上に何も表示されないため、まだ表示されています。ポジション：相対的なもの私はレイヤリングをトリガーするものだと思います。私はなぜか分からないのではないかと思う。しかし、私は知りたいと思うだろう。 – powerbuoy

position: relativeです。この行を削除すると、divとtext-rightクラスが表示されます。 z-index: -1;をfooterクラスに設定することもできます。これも同様に動作します。

出典

2011-12-22 13:51:59 Lucas

ありがとうございましたが、私の質問で言ったように、なぜこれが起こったのか、問題の解決方法ではないことを知りたいのです。 – Samuel

div浮動体に対する相対位置を持つdiv

答えて

関連する問題