CSSPosition の配置

Position 属性は、要素のレイアウトを確立するために使用される位置決めメカニズムを定義します。任意の要素を配置できますが、要素を絶対に配置するか固定すると、要素のタイプに関係なく、ブロック レベルのボックスが生成されます。要素を相対的に配置すると、通常のドキュメント フローのデフォルト位置からオフセットされます。

Position 要素には通常、次の 5 つの属性があります:

1.absolute(静的配置以外の最初の親要素を基準にして絶対配置の要素を生成します。要素の位置は上、左、右、下を通して設定されます。)

2.fixed（絶対配置の要素を生成します。absoluteと違い、fixedはブラウザウィンドウを基準に配置されます。要素の位置設定方法はabsoluteと同じです。）

3.relative(ブラウザウィンドウを基準にして相対的に配置された要素を生成します。そのため、「left:20px;」とすると要素の左位置に20ピクセルが追加されます。)

4.static (position要素のデフォルト値、位置決めなし、そのためこの要素は通常のドキュメントフローに表示されます)

5.inherit（親要素から継承すべきposition属性の値を設定します。）

以下に、さまざまな属性のコード例をリストします。

1.絶対属性

これは絶対配置のタイトルです

絶対配置を使用すると、要素をページ上のどこにでも配置できます。以下のタイトルは、ページの左側から 100 ピクセル、ページの上部から 150 ピクセルの位置に配置されます。

2.相対属性()

これは通常の位置のタイトルです

このタイトルは通常の位置に対して左に移動します

< ;h2 class="pos_right">このタイトルは通常の位置に対して右に移動します

相対配置では、元の位置に従って要素が移動します。

スタイル「left:-20px」は、要素の元の左位置から 20 ピクセルを減算します。

スタイル "left:20px" は、要素の元の左位置に 20 ピクセルを追加します。

3.固定属性