相対配置要素が浮動要素の上に表示されるのはなぜですか？

Question

私は2つの要素を持っています.1つは、私のヘッダーの大部分を定義する相対的な配置を持ち、もう1つは、その上に浮かべたいものです。

<div id=floater style="float:right"> 
Floater! 
</div> 
<div id=header style="width: 100%; position: relative; background-color: lightgreen"> 
This is the header 
</div> 

this fiddleに示されているように、フローティングコンポーネントは見えません。しかし、position: relativeを削除すると、浮動小数点の要素が右上にポップアップします。 Z-指数を押し下げても何の関心もない。

ヘッダーコンポーネントは「マイナー」ではありません。 React-Bootstrapを介して継承されます。私はオーバーライドすることができますが、今はフロートと相対的な位置付けの相互作用を理解しようとしています。

Answer 1

positionプロパティが設定されていない要素は、デフォルトで「position：static」に設定され、z-indexなどのすべての位置指定プロパティは無視されます。相対位置をヘッダ要素に設定することで、z-indexプロパティを持たないfloater要素の前にその要素を持っていくことで、z-indexの位置決めプロパティを導入しました。

静的浮動小数点要素ではz-インデックスは無視されるため、その要素に位置情報（絶対、相対、または固定）を与えなければならないので、z-インデックスも持つことができます。

例：「position：relative;」うまくいくでしょう。 floater要素のpositionプロパティを設定したら、ヘッダ要素より上位のz-index値を追加する必要があります。 z-indexはデフォルトに設定されているので、この場合z-index：1はより高い値になります。

例：

<div id=floater style="float:right; position: relative; z-index: 1;"> 
    Floater! 
</div> 
<div id=header style="width: 100%; position: relative; background-color: lightgreen"> 
    This is the header 
</div> 

Answer 2

要素が配置されている場合、他の要素と重なることがあります。 Zインデックスを指定せずに2つの配置された要素が重なっている場合、HTMLコードの最後に配置された要素が上に表示されます。

Answer 3

これはインフローpainting order

の機能、非配置され、ブロックレベル要素は、ステップ4

浮上項目に描かれていますフローティング要素は静的divの「上」に塗りつぶされ、表示されます。

しかし、 'z-index：auto'または 'z-index：0'の位置付けされた子孫がステップ8でペイントされます。したがって、position:relativeをdivに追加すると、float要素の "それを隠している。