CSS を配置するさまざまな方法とそれらの違い

フロントエンドのレイアウトを行う場合、位置決めはCSSの重要な部分であり、具体的には以下のような属性値を持ちます。共通の属性は次のとおりです。

値 説明

absolute 静的配置以外の最初の親要素を基準にして相対的に配置される、絶対配置の要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。
fixed ブラウザ ウィンドウを基準にして絶対配置された要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。
relative 通常の位置を基準にして相対的に配置された要素を生成します。したがって、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。
静的なデフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。
inherit は、position 属性の値が親要素から継承されることを指定します。

まず、ここでは標準のボックスモデルを使用しているため、分析するときは誰もがそれをボックスまたはフレームとして考える必要があります。まず最初のデフォルトパラメータ static について学びましょう。

static: 静的配置はpositionのデフォルト値であり、要素ボックスは通常どおり生成されます。つまり、配置なしで通常どおり表示されます。
absolute: 絶対に配置された
要素はドキュメント フローから削除され、含まれているブロックに対して相対的に配置されます。要素は元の空間で閉じられます。ブロックレベルのボックスは、元がインライン要素であったかブロックレベル要素であったかに関係なく、要素が配置された後に生成されます。
ここでの包含ブロックは、最新の位置値が静的ではない祖先要素 (ブロック レベルまたはインライン) を指します。一般に、要素は絶対位置の要素の包含ブロックとして指定され、その位置はオフセットなしの相対に設定されます。

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

relative: 相対的な位置決め。相対配置、最も一般的な使用方法は次のとおりです:
使用方法 1: 要素は元の位置に対して一定の距離だけオフセットされますが、元のスペースは保持され、空白として表示されます。
方法 2: 要素をposition:relativeに設定し、要素の子要素を要素に対して絶対相対的に配置します。

絶対/固定比較と浮動小数点比較
同じこと: 要素はテキスト フローから分離され、通常のテキストから削除されますが、レイアウトに影響するかどうかに関係なく、ブロック レベルのボックスが生成されます。ブロックレベルの要素であるかどうか。
違い: float を含むブロックは、最も近いブロックレベルの祖先要素です。

オフセット属性を設定します: 上/右/下/左。初期値は自動です。
位置の配置を使用した後、offset 属性を使用してオフセットを定義する必要があります。これは、含まれているブロックに対する相対的なオフセットです。使用する際に注意が必要なのは、オフセットを定義する要素は位置の値が静的ではない要素であることです。
場合によっては、幅と高さの定義も必要になりますが、実際には 4 つのオフセット属性が要素のサイズを定義するため、オフセット属性の定義と競合する可能性があります。このとき、左と右はwidthとleft属性で定義され、上と下はtopとheight属性で定義されます。

CSS の別のプロパティ。次にコンテンツオーバーフロー: overflow
通常、コンテンツオーバーフロー属性には次の値があります:
overflow:visible/hidden/scroll/auto/inherit
overflow 初期値はvisibleです。
オーバーフローは私たちがよく使うものです。要素のサイズは固定されているが、その内容が収まらない場合、オーバーフローが発生します。オーバーフローは、オーバーフロー部分の可視性、不可視 (非表示)、およびスクロールの可視性 (スクロール) を制御します。
要素の表示/非表示: 表示/非表示/折りたたみ/継承、初期値が表示されます。

以上がCSS を配置するさまざまな方法とそれらの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。