CSSの配置方法

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

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

位置決めとは:

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

各属性値の説明:

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

各属性値の特定の機能:

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 親として本文から開始し、左上隅を開始点として取ることがわかります。

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

図 4: 位置の設定: box-chd を基準にすると、box-chd- がわかります。 chd は親クラスとして box-chd を使用します

子がposition:Absoluteを設定し、その親がposition:relativeを設定すると、子は親要素の左上を開始点として移動し、最も近い原則#に従います。 ##、つまり、子は親を検索します。相対セットを持つ最初の親を見つけたら、左上の親を開始点として使用します。

相対と絶対を組み合わせることで、位置決めやレイアウトが容易になり、移動距離も短縮され、本文からページ全体のピクセルを計測する必要がなくなります。管理に便利で、明確な構造を持っています。

(学習ビデオ共有:

css ビデオ チュートリアル)

以上がCSSの配置方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。