CSS 配置レイアウト (位置、配置レイアウト スキル)

CSS 配置レイアウト (位置、配置レイアウト スキル)

1. ポジショニングとは何ですか?

CSS の position 属性には、absolute/relative/fixed/static (absolute/relative/fixed/static (default)) の 4 つの値があります。positioning 属性を使用すると、不規則なレイアウトを設定したり、 TLBR (上、左、下、右)を使用して要素の位置を調整したりできます。

2. 各属性値の説明:

static (静的) には特別な設定はなく、基本的な配置規則に従い、z-index による階層化はできず、通常のフローの各要素にデフォルトの属性があります。相対オブジェクトは積み重ねたり、ドキュメント フローから分離したりすることはできず、上、下、左、右を使用して自身の静的位置を参照して配置されます。 Absolute(絶対配置)は、ドキュメントフローから外れ、上、下、左、右で配置されます。絶対配置には、最も多くの配置設定を持つ最も近い親オブジェクトを選択します。オブジェクトの親に配置属性が設定されていない場合、絶対要素はボディ座標の原点に配置されます。 fixed (固定位置) ここでの固定参照オブジェクトは、本体や親要素ではなく、表示されるウィンドウです。 fixed を使用する要素は、ウィンドウがスクロールしてもスクロールしません。絶対のサブセットに属します。

3. 各属性値の具体的な役割:

A.static: (静的、デフォルトプロパティ) 通常は使用されませんが、位置の値を他の値からデフォルトに変更したいシナリオがいくつかあります。

B.relative: (相対配置) 要素は position:relative で設定されます。テキストフローから外れないため、TLBR (上、左、下、右) が設定されていない場合、その位置は変更されず、現在のレイアウトには影響しません。つまり、何も起こらないのと同じです。 TLBR が設定されている場合、要素は指定された方向にオフセットできますが、元の位置は引き続き占有されます。例を図に示します。

図1: 子1の位置を相対的に設定

図2: 子1の位置を調整する 上: 20px 左: 20px

C.absolute: (絶対配置)、テキストフロー(通常フロー)から完全に外れ、元の位置は占有されなくなり、TLBR を任意に移動するように設定できます。

特記事項として、要素に absolute が設定されていて、その親要素に位置 (absolute/relative/fixed) が設定されていない場合、body がその親になります。

図1:

図2:

図3:

D.fixed : (固定位置)、ページと一緒にスクロールしません。ここには画像は掲載されません。最もわかりやすい例は、小さな Web 広告です。ページをスクロールしても、広告は常に Web ページの右側または左側に表示され、スクロールしたユーザーを追いかけます。

4. 配置レイアウトスキル: position: relative と position: absolute を一緒に使用します。

前述のように、要素に absolute が設定されていて、その親要素のいずれにも position:relative が設定されていない場合は、body がその親になります。この場合、要素を目的の位置に配置するのが難しくなり、ピクセルを測定するのが面倒になります。画像の説明:

図1: 初期状態

図 2: box-chd-chd の position: absolute を設定し、top: 0、left: 0 を設定します。親である body から左上隅を開始点として取得していることがわかります。

図3: ボックスの位置を相対的に設定すると、box-chd-chdがボックスを親として使用することがわかります。

図4: box-chdのposition: relativeを再度設定すると、box-chd-chdがbox-chdを親として取得していることがわかります。

子が position: absolute を設定し、その親が position: relative を設定すると、子は親要素の左上を開始点として移動し、近接原則に従います。つまり、子は上に向かって親を探し、relative を持つ最初の親が見つかったら、その左上を開始点として使用します。

相対と絶対の組み合わせにより、配置レイアウトがより便利になり、移動に必要な距離も短縮されます。本文からページ全体のピクセルを測定する必要はありません。管理も簡単で、構造も明確です。

要約: 前回の記事ではフロートレイアウトのテクニックについて説明しましたが、この章では位置について説明します。位置とフロートはどちらも一種のレイアウト方法であり、それぞれ独自の適用シナリオがあることがわかります。ニーズに応じてレイアウト方法を選択できます。

<<:  MySQLの浅いエントリと深いエグジットの原則についての簡単な説明

>>:  ラベルとスパンの幅設定が無効である問題の解決

推薦する

ドメイン名を介してプロジェクトにアクセスするnginx + tomcatの例

ドメイン名を使ってプロジェクトにアクセスする方法が気になったのですが、自分でドメイン名を取得するのは...

border-image を使用してテキストバブルの境界線を実装する方法のサンプルコード

開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。 うーん...

ウェブページを開いて数秒後に他のページにリダイレクトする

これを実現するには、次のコードを追加するだけです。方法1: メタを使用する使用方法: <Met...

docker-compose.yml ファイル内の一般的なテンプレート コマンドの詳細な説明

注意: docker-compose.yml ファイルを書き込むときは、すべてのコロン (:) とダ...

Linux コマンドラインで他のユーザーと通信する方法

Linux のコマンドラインで他のユーザーにメッセージを送信するのは簡単です。これを行うコマンドは多...

反応ループデータの実装(リスト)

まず、バックグラウンドから来るデータをシミュレートしてみましょう。ここでは、コードをわかりやすくする...

MySQLデータベースでサポートされているストレージエンジンの比較

目次ストレージエンジンMySQL でサポートされているストレージ エンジン同時実行制御ロック粒子をロ...

MySQLインデックスの基礎となるデータ構造の詳細

目次1. インデックスの種類1. B+ツリー2. MyISAM と InnoDB の B+ ツリー ...

js はランダムロールコールを実装します

この記事では、ランダムロールコールを実装するためのjsの具体的なコードを参考までに共有します。具体的...

VMware 仮想マシンのインストール Apple Mac OS の超詳細なチュートリアル

目次要約する仕事の都合で Apple の Mac OS に対応するソフトウェアをインストールする必要...

Angularの親子コンポーネント通信の詳細な説明

目次概要1. 入力および出力プロパティの概要2. 入力属性3. プロパティバインディングは親コンポー...

Docker ベースの Selenium 分散環境の構築

1.画像をダウンロードするdocker pull selenium/hub docker pull ...

モバイル適応型ウェブページ効果は、小さな表示ページの問題を解決します

仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...

実用的な基本的な Linux sed コマンドのサンプルコード

Linux ストリーム エディターは、データ センターでスクリプトを実行するのに便利な方法です。これ...

MySQL 5.7.18 winx64 のインストールと設定方法のグラフィックチュートリアル

圧縮パッケージのインストールは、mysql-5.7 以降、大幅に変更されました。この記事では、mys...