さまざまな CSS 配置方法の違い

static: 静的配置は、position のデフォルト値です。要素ボックスは通常どおりに生成されます。つまり、配置せずに通常どおり表示されます。

Relative: 相対的な配置

使用法 1: 要素は元の位置に対して一定の距離だけオフセットされますが、元のスペースは保持され、空白として表示されます。

使用法 2: 要素をposition:relative;に設定して、要素の子要素を要素に対して相対的に配置します。

Absolute: 絶対配置

要素はドキュメントフローから削除され、それを含むブロックに対して相対的に配置されます。要素は元の空間で閉じられます。ブロックレベルのボックスは、元がインライン要素であったかブロックレベル要素であったかに関係なく、要素が配置された後に生成されます。

包含ブロック: 最も近い位置の値は静的な祖先要素ではありません (ブロック レベルまたはインライン)。一般に、要素は絶対位置の要素の包含ブロックとして指定され、その位置はオフセットなしの相対に設定されます。 。

固定: 固定位置

要素はドキュメント フローから削除され、ブラウザ ウィンドウを基準にして配置されるため、ドキュメントがスクロールしても移動しません。要素は元の空間で閉じられます。ブロックレベルのボックスは、元がインライン要素であったかブロックレベル要素であったかに関係なく、要素が配置された後に生成されます。絶対配置との唯一の違いは、それを含むブロックです。

ブロックを含む: ブラウザウィンドウ。

絶対/固定と浮動小数点数の比較

同様: 要素はドキュメント フローから削除されますが、ブロック レベルのボックスが生成されるかどうかに関係なく、レイアウトには影響します。ブロックレベル要素かどうか。

違い: float の包含ブロックは、最も近いブロックレベルの祖先要素です。

Offset属性：上/右/下/左、初期値はautoです。

位置配置を使用した後は、offset 属性を使用してオフセットを定義する必要があります。これは、含まれているブロックに対する相対的なオフセットです。これは、位置の値が静的ではない要素に適用されることに注意してください。

幅と高さを定義する必要がある場合もありますが、実際には 4 つのオフセット属性が要素のサイズを定義するため、オフセット属性の定義と競合する可能性があります。このとき、左と右はwidth属性とleft属性で定義され、上と下はtopとheight属性で定義されます。

コンテンツオーバーフローオーバーフロー：表示/非表示/スクロール/自動/継承、初期値は表示されます。

要素のサイズは固定されていますが、その内容が収まらないため、オーバーフローが発生します。オーバーフローは、オーバーフロー部分の可視性、非表示、およびスクロールの可視性を制御します。

要素の可視性の可視性：表示/非表示/折りたたみ/継承、初期値は表示されます。

Visibility:hidden と display:none の違い: Visibility:hidden は要素を非表示に設定しますが、要素は引き続きレイアウトに影響しますが、要素は部分的に空白で表示されます。ドキュメント フローから削除されます。ドキュメントのレイアウトには影響しません。