CSSの配置方法-CSSチュートリアル-php.cn

CSSの配置方法

青灯夜游

リリース： 2023-01-05 16:13:08

オリジナル

15233 人が閲覧しました

Css の配置方法: まず、position 属性を使用して要素の配置タイプ (静的配置、絶対配置、相対配置、または固定配置) を指定し、次に left、top、right、bottom 属性を使用して調整します。要素の位置。

CSSの配置方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

位置決めとは:

CSS の位置属性、position には、絶対/相対/固定/静的 (絶対/相対) の 4 つの値があります。 /Fixed/Static (デフォルト)) 位置属性を使用して不規則なレイアウトを設定できます。要素の位置を調整するには、TLBR(top,left,bottom,right) を使用します。

各属性値の説明:

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

各属性値の特定の機能:

A.static: (静的、デフォルト属性) は通常は使用されませんが、position の値を他の値からデフォルトに変更したい場合に使用したいシナリオがあります。

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

図 1: Position:relative# が child-1 に設定されています

##図 2: 子 1 の位置を上: 20px 左: 20px

C に調整します。絶対:

(絶対位置決め)、テキストフロー (通常の流れ) から完全に分離され、元の位置が占有されなくなり、TLBR を自由に移動するように設定できます。特別な注意事項、設定後要素の絶対。その親要素のいずれも位置: 絶対/相対/固定セットを持たず、親として body を持ちます。

写真 1:

写真 2:

写真 3:

D.fixed

: (固定位置)、ページがスクロールしてもスクロールしないため、ここには画像はありません。最も鮮やかなものは、小さな Web です。ページ広告: ページをスクロールしても、広告はページの右または左に追従し続けます。

配置レイアウトスキル:position:relative とposition:Absolute を組み合わせて使用する場合: 上記のように、要素にAbsoluteが設定されている場合、その親要素にはposition:relativeが設定されておらず、bodyが親になります。この場合、要素を目的の位置に配置することが困難になり、ピクセルを測定するのが面倒になります。画像の説明:

画像 1: 初期状態

画像 2: セット位置: box-chd-chd の絶対位置、およびセットトップ: 0、左: 0 親として本文から開始し、左上隅を開始点として取ることがわかります。