要素を配置するいくつかの方法

Webページのレイアウトでは、通常、フローティングモデルとボックスモデルが推奨されます。要素に階層関係または不規則なレイアウトがある場合は、配置が使用されます。

配置プロパティ:位置。

座標を指定:左\右\上\下。

位置属性値:

一、position:static;

静的配置の場合、静的要素は上、下、左、および右の宣言を無視します。静的要素は通常どおり表示されます。これは要素のデフォルト値であり、設定の効果は設定しない場合と同じです。

二、位置:絶対;

絶対配置。配置された親要素を参照オブジェクトとして使用し、親要素が配置されていない場合や親要素がない場合は、ドキュメント全体が参照オブジェクトとして使用されます。絶対配置はレイアウトフローからはみ出し、スペースを占有しません。

包含ブロックは、絶対配置の基礎です。包含ブロックは、位置決め要素の座標、オフセット、および表示範囲を提供する参照オブジェクトです。つまり、絶対配置オフセットの開始点とパーセンテージの長さを決定するための参照です。

デフォルトでは、htmlは大きな包含ブロックです。絶対配置されたすべての要素は、ウィンドウの位置とパーセンテージサイズに従って表示されます。包含要素を包含要素ブロックとして定義すると、絶対配置要素の場合、表示機能は、配置機能を備えた最も近い上位の包含要素に従って表示位置を特定します。

要素を包含ブロックとして定義します。宣言位置を追加します。絶対配置された要素の親要素に対して相対的です。

例:

 

 

三、位置:相対的;

レイアウトフローを中断することなく、スペースを占有する相対的な配置。開始した位置を参考にしてください。

例:

 

 

四、位置:固定;

ブラウザーに対する絶対配置。ウィンドウがスクロールされるかどうかに関係なく、要素はその位置にとどまります。

例:

 

 

表示効果は下図のように、btnBoxを常にウィンドウの左側に表示するように設定します。

 

おすすめ

転載: www.cnblogs.com/heliyeah/p/12753716.html