CSSの4種類の配置の違いの詳細な説明

CSSの4種類の配置の違いの詳細な説明

フロントエンド開発でよく使われるCSSの配置方法は、

位置決めには、通常位置決め、相対位置決め、絶対位置決め、固定位置決めの 4 種類があります。

しかし、基礎知識のないフロントエンド初心者の多くは、これら 4 つの位置決め方法の機能と違いを知らず、使用時に柔軟性に欠けています。Web ページのレイアウトをうまく行いたい場合、これら 4 つの位置決め方法が重要だということを知っておく必要があります。位置決めとレイアウトをしっかり学べば、フロントエンドの開発は簡単になります。

そこで今日は、CSS におけるこれら 4 種類の配置の機能と違いについて説明します。これら 4 つのレイアウトのすばらしい使い方をみんなに理解してもらいましょう。

1. 静的ポジショニング

当社の開発プロセスでは、特に指定がない限り、すべてのボックスは共通フローに配置されます。通常フローにおける要素のボックスの位置は、(X)HTML における要素の位置によって決まります。ブロックレベル要素は上から下に配置され、ボックス間の垂直距離はボックスの垂直余白によって計算されます。インライン要素は一列に水平に配置されます。これについては詳しく説明しません。

2. 相対的な位置付け

私たちのフロントエンド開発では、相対的な配置は常に通常のドキュメント フロー配置モデルの一部と見なされ、配置された要素の位置は通常のフローでの位置を基準に移動されます。相対配置を使用する要素は、移動されたかどうかに関係なく、元の位置を占め続けます。要素を移動すると、他のボックスが覆われてしまいます。

結果

3. 絶対位置指定

フロントエンド開発では、最も近い位置にある親要素を基準とします。最も近い位置にある親要素がない場合、その位置は最初の包含ブロック (body など) を基準とします。絶対配置されたボックスは、それを含むブロックから上、右、下、または左に移動できます。

結果

4. 固定位置

ブラウザ ウィンドウを基準にすると、残りの特性は絶対配置と同様になります。固定要素は、ブラウザ内の特定の位置に固定されている要素です。絶対位置に配置された要素はページに固定されています。スクロール バーをスクロールすると、絶対位置に配置された要素も上にスクロールしますが、固定要素はスクロールしません。

やっと

これらの配置方法にはそれぞれ利点があります。多くの初心者は、ページを書くときに、これらの 4 つのレイアウト方法のどれを使用すればよいのか、とよく尋ねます。 (この質問はとても単純に聞こえます)

最後に、現在のプロのフロントエンド開発作業で最もよく使用されているのは絶対位置決めでも相対位置決めでもなく、絶対位置決めと相対位置決めの組み合わせであることをお伝えします。 (小白: 何ですって? フュージョン?)

この組み合わせによって、新たな位置決め方法が生まれるわけではありません。代わりに、フロントエンド開発におけるレイアウト記述仕様を参照します。

親子絶対 (つまり、親要素は相対配置を使用し、子要素は絶対配置を使用し、それらを組み合わせてレイアウトを実現します。)

このレイアウト仕様は、現段階ではフロントエンド開発で認められたレイアウト方法であり、多くのエラーを回避することもできます。

CSSの4種類の配置についての詳細説明は以上です。CSSの配置4種類の違いについて詳しく知りたい方は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  MySQL の結合クエリとサブクエリの問題

>>:  SWFObjectを使用すると、HTMLにFlashを挿入する際のブラウザ互換性の問題を完全に解決できます。

推薦する

CSS はコンテナ レベル (div...) タグを 1 つの位置 (ページの右端) に固定します。

コードは次のようになります。 。プロセス{ 境界線:1px 実線 #B7B7B8; 背景:#F8F8...

Linux のパスワードを紛失した場合にリセットする方法

1. スタートアップメニューでは、カーソルを最初の行に移動します - eを押します 2. UTF-8...

ウェブデザインにおけるインタラクション: ページングの問題に関する簡単な説明

機能: 前のページまたは次のページにジャンプします。要素: ページングの基本要素は、前のページ + ...

Linux ソフトウェアのインストール場所を確認する簡単な方法

1. ソフトウェアのインストールパスを確認します。 Linuxソフトウェアをインストールできる場所は...

Windows プラットフォームでの MySQL のインストールと設定方法と注意事項

2.1、msiインストールパッケージ2.1.1、インストール特に重要なのは、インストール前に、元の ...

DockerにJava環境をインストールするための実装手順

この記事は Linux centos8 をベースにして、docker をインストールし、イメージをプ...

Windows に mysql5.7.28 winx64 の解凍バージョンをインストールするための詳細なチュートリアル

目次1. 解凍する2. データフォルダを作成する3. MySQLに環境変数を追加する3.1 コントロ...

jQueryブリージングカルーセルの制作原理を詳しく解説

この記事では、jQueryブリージングカルーセル制作原理の具体的なプロセスを参考までに紹介します。具...

MySQL では UTF-8 が推奨されないのはなぜですか?

最近、Rails 経由で「utf8」でエンコードされた UTF-8 文字列を MariaDB に保存...

MySQL ステートメントを使用した簡単な追加、削除、変更、クエリ操作の例

この記事では、例を使用して、MySQL ステートメントを使用して、単純な追加、削除、変更、およびクエ...

エコー後に要素編集フォームel-radioが選択できない問題を解決します

目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...

ApacheとTomcatによるクラスタ環境構築プロセスの分析

実際、Apacheクラスタを構築するのは難しくありません。私もインターネットで情報を見つけて自分で設...

JavaScript 定期検証パスワード強度実装方法

展示する デザインパスワード強度分析パスワードは数字、文字、特殊記号で構成されていますパスワード: ...

HTMLの基礎 HTMLの構造

HTML ファイルとは何ですか? HTML は Hyper Text Markup Language...

Apache ab を使用して HTTP パフォーマンス テストを実行する

MacにはApache環境が付属していますターミナルを開き、sudo apachectl -v と入...