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を挿入する際のブラウザ互換性の問題を完全に解決できます。

推薦する

フェッチネットワークリクエストのカプセル化例の詳細な説明

エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...

Mac OS10.12 に mysql5.7.18 をインストールするチュートリアル

ウェブ全体を検索して、さまざまな落とし穴を見つけましたが、問題は解決しませんでした。ついに自分でも分...

CentOS7でパーティションのサイズを変更する方法

昨日、ある人のシステムのインストールを手伝ったのですが、自動パーティション分割をクリックするのを忘れ...

MySQL5.7.03 上位バージョンから MySQL 5.7.17 への置き換えインストール プロセスと見つかった問題の解決策

1. インストール方法は? 1. [実行] -> [cmd] と入力して、小さな黒いウィンドウ...

React の 3 つの主要属性における Ref の使用に関する詳細な説明

目次クラスコンポーネント機能コンポーネントインタビューのよくある質問: React における ref...

Linux sshのデフォルトのリモートポート番号を変更する6つの手順

Linux のデフォルトの ssh リモート ポートは 22 です。デフォルトのポートは、悪意のある...

MySQLの自動増分主キーIDはこのように処理されません

MySQLの自動増分主キーIDは段階的に増加しません1. はじめにMySQL データベースにデータを...

7つの便利なTypeScriptの新機能

目次1. オプションの連鎖2. NULL値の結合3. 再帰型エイリアス4. アサーション署名5. P...

シンプルなウェブページレイアウトの構造と表現原理の共有

構造とパフォーマンスの紹介HTML 構造、CSS 表現、JavaScript 動作。Web ページの...

ローカルのMySQLをサーバーデータベースに移行する方法

Linux の scp コマンド (Windows では scp は使用できません) と、mysql...

IE8 と Chrome でテーブルの幅を修正する方法

IE8 や Chrome で上記の設定を使用すると、画面の最大幅に合わせて表示が統一され、各列の幅は...

Vueリストレンダリングキーの原理と機能の詳細な説明

目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...

JavaScriptコールバック関数の詳細な理解

目次序文クイックレビュー: JavaScript 関数関数とは何ですか?関数を宣言する関数の呼び出し...

フォーム内の無効なフォームフィールドの値を送信する方法 サンプルコード

フォーム内のフォーム フィールドが無効に設定されている場合、フォーム フィールドの値は送信されません...