CSS における静的位置指定と相対位置指定はどのように異なりますか?

CSS での静的位置と相対位置

CSS では、要素のレイアウトを操作するために静的位置と相対位置の違いを理解することが重要ですWeb ページ上。

静的配置 (デフォルト)

静的配置の要素は期待どおりに動作します。これらは、HTML フローに従って親要素内でインラインでレンダリングされます。左、上、右、下などの配置ルールには反応しません。

相対配置

相対配置により、要素をデフォルトの位置を基準にして移動できます。 HTMLの流れ。オフセット (例: 左: 50px) を指定すると、要素の位置がデフォルトの配置を基準にして移動されます。静的配置とは異なり、相対配置の要素は HTML フローに従います。

配置ルールの影響

相対配置により、要素の配置に柔軟性が与えられます。ただし、他の配置タイプも存在します。

• 絶対配置: 要素は HTML フローから削除され、含まれている要素または次に相対的に配置された上位の祖先を基準にして正確に配置されます。要素ツリー。
• 固定位置: スクロールに関係なく、要素は HTML フローから削除され、ビューポート内の特定の位置に固定されます。

違いを理解する

次の要約表は、静的配置と相対配置の主な違いを示しています:

Feature	Static	Relative
Default Behavior	Elements flow inline	Position relative to default
Position Rules	Ignored	Respected
Removed from HTML Flow	No	No

以上がCSS における静的位置指定と相対位置指定はどのように異なりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。