CSS における相対位置と絶対位置: 違いは何ですか?

位置を理解する: CSS の相対と絶対の比較

CSS の位​​置を使用すると、Web ページ上の要素の位置を定義できます。位置: 相対と位置: 絶対は 2 つの一般的に使用される位置決めオプションですが、動作と目的が異なります。

位置: 絶対

位置: 絶対を設定する場合、要素はドキュメントの通常のフローから削除され、ページ上の正確な位置に配置されます。 4 つの位置プロパティ (上、右、下、左) は、ブラウザのビューポートまたはその親コン​​テナ (位置がオーバーライドされたコンテナがある場合) に対する要素の位置を決定するためのオフセットとして使用されます。

Position:Absolute を使用する場合:

• ページ内での位置に関係なく、要素をページ上の特定の位置に正確に配置するにはフロー。
• 他のページ コンテンツと重複できるフローティング要素を作成します。

位置: 相対

位置: 相対の場合、要素はドキュメントの通常の流れに残りますが、その位置は元の位置を基準にして調整されます。位置決めプロパティは絶対位置決めと同じように機能しますが、フロー内の現在の位置から要素の位置をオフセットします。

位置: 相対:

を使用する場合
• ドキュメント フローから要素を削除せずに要素の位置を移動します。
• 相対的に表示されるドロップダウン メニューまたはその他の要素を作成します。

主な違い:

• 絶対配置では要素が通常のフローから削除されますが、相対配置では要素がフロー内に保持されます。 .
• 絶対配置では、ビューポートまたは親コンテナを基準とした要素の位置が決定されますが、相対配置では要素がビューポートまたは親コンテナから移動されます。フロー内の現在の位置。
• 絶対配置の要素にはその内容に基づいたデフォルトの幅があり、相対的に配置された要素のデフォルトの幅は 100% です。

以上がCSS における相対位置と絶対位置: 違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。