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

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

relative: 相対的な配置

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

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

Absolute: 絶対に配置されます

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

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

固定: 固定位置

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

含まれるブロック: ブラウザウィンドウ。

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

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

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

オフセット属性: 上/右/下/左、初期値は自動です。

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

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

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

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

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

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