CSS レイアウト: フローティング位置と絶対位置の類似点と相違点_html/css_WEB-ITnose

フローティング (float) と絶対位置決め (position:absolute)

同じ点: (1) どちらも float (元の位置を残す)

(2) どちらも元を占有しない位置

(3) また、たとえば、h1 テキスト ラベルがデフォルトで高さのみに設定されている場合、その幅は親要素の幅を埋め、フロートまたは絶対配置の場合はその幅が親要素の幅になります。 h1 のテキストの幅

違い: float の後、(ここでは float:left)その後ろのオブジェクトは元の位置を占めます

しかし、後続のオブジェクト内のテキストと画像はそれを知っているようです

は左側にあるため、それらは自動的にその背後に表示されます

つまり、その背後にあるオブジェクトのテキストと画像はブロックされません

position:absolute絶対位置決めの後、

背後のオブジェクトまた、元の位置を占めます

しかし、その背後にあるオブジェクトは完全に無視され、左上隅に直接表示されます

つまり、オブジェクトのテキストや写真などのオブジェクトの左上の部分です後ろはそれによってブロックされます

デフォルトでは (つまり、h3 には float と絶対位置がありません)

h 3 にはフロートがあります

h3 絶対位置設定の場合

🎜 🎜