ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS における静的、相対、絶対、固定の配置はどのように異なりますか?

CSS における静的、相対、絶対、固定の配置はどのように異なりますか?

Mary-Kate Olsen
リリース: 2024-11-08 21:42:02
オリジナル
317 人が閲覧しました

How do Static, Relative, Absolute, and Fixed Positioning Differ in CSS?

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

静的配置は、HTML 要素のデフォルトの配置です。静的配置の要素は、左、上、右、下のルールに関係なく、ページの通常のフローに従って表示されます。一方、

相対配置では、相対的なオフセットを指定できます。 HTML フロー内の要素の通常の位置。これにより、要素をドキュメントのレイアウト内での位置を維持しながら、特定の位置に移動できます。

たとえば、相対位置を使用して、div 内のテキストボックスを法線を基準とした特定の位置に移動できます。 div 内の位置

これとは対照的に、ドキュメント全体または相対的に配置された最初の親要素を基準とした要素の正確な位置を指定できる絶対配置もあります。絶対配置では、要素が HTML フローから削除され、ページ上のどこにでも配置できます。

さらに、固定配置では、ページがスクロールされている場合でも、要素がビューポート内の特定の位置に制限されます。固定位置の要素も HTML フローから削除されますが、ビューポートに拘束されず、ページと一緒にスクロールしません。

要約すると、静的な配置では要素の通常のフローが維持されますが、相対的な配置では次のことが可能になります。フロー内で要素を移動したり、絶対配置を使用してドキュメント内の特定の場所に要素を配置したりできます。固定配置では、フローから要素が削除され、ビューポート内の特定の場所に制限されます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート