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 を持つ最初の親が見つかったら、その左上を開始点として使用します。

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

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