IFE-タスク-03:3 列のレイアウト_html/css_WEB-ITnose

position属性

CSSのposition属性は、要素の配置方法を設定し、配置する要素の配置ルールを定義します。 (MDNより抜粋)

デフォルト値は static です。 要素の位置属性が静的でない場合、それは位置指定要素と呼ばれます。これには、相対位置決め要素、絶対位置決め要素、およびスティッキー位置決め要素の 3 つのタイプが含まれます。最後のスティッキー プロパティである Sticky はまだ実験段階です。残りの 3 つの属性値は次のとおりです。

• relative は相対的な配置です。相対要素は元の位置を基準にして変更され、レイアウトは変更されずに元の位置が変更されません。静的と同様に、ドキュメントの通常の流れ (normal-flow) から逸脱することはありません。 ドキュメントの通常の流れは何ですか
• absolute は絶対的な配置です。絶対要素は、要素の祖先要素を再帰的に検索します。最も近い祖先要素の位置が依存/絶対/固定に設定されている場合、祖先要素に基づいてオフセットされます。上記の属性を含む祖先要素が存在しない場合、要素の位置は最初に含まれるブロックによって決定されます。絶対的な要素が通常の流れから外れてしまいます。
• fixed は、固定された位置を意味します。固定要素は、画面ウィンドウに対して相対的に配置することで要素のスペースを指定します。固定要素は依然として通常のフローから外れます。

理論について話した後、かろうじてフィッツの場合について考えてみましょう。アブソリュートは通常の流れから外れ、使用中にケースの第5段階のカバーリング問題が発生することがわかっています。通常のフローでは、絶対に配置された 2 つの要素 #div-1a と #div-1b が #div-1c をカバーします。著者はこの問題を解決するために float 属性を使用しています。