備忘録的プログラミングリファレンス

position プロパティ

 position プロパティは、エレメントの位置を指定するプロパティです。親エレメントに対して絶対位置や相対位置、ウィンドウに対して絶対位置の設定やスクロールの操作時の位置を定義することができます。

 もしも absolute 値を指定する場合は、親エレメントに position:relative; または fixed 値を指定します。親エレメントが position:static; では window の表示部分の左端が基準になります。

親エレメントに対して相対配置に(Exampleを参照
position: relative;
top: 50px;
left: 100px;

関連プロパティ

 配置位置を設定するには以下のプロパティを併用します。

配置の設定

 以下のプロパティを使ってエレメントの表示位置を設定します。

関連プロパティ摘要
top最上端が基準
bottom最下端が基準
left左端が基準
right右端が基準

前後位置の設定

 z-indexプロパティで、エレメントの前後の表示順を設定します。

関連プロパティ摘要
z-index前後の表示順

構文(Syntax)

CSS

position: static | absolute | fixed | relative | sticky | initial | inherit;

DOM ( JavaScript )

値の取得
String = object.style.position;
値の設定
object.style.position="static | absolute | fixed | relative | sticky | initial | inherit";

値(Values)

Value摘要
staticdefault値。エレメントに設定されている位置、位置を設定しても反映されない
absolute絶対位置の設定で、基準位置はウィンドウの上端。親エレメント(親要素)にpositon:static;以外が設定されていれば親エレメントの上端になる
fixed絶対位置の設定でスクロールに影響を受けない。ウィンドウ上の表示位置が固定される。基準位置はウィンドウの上端
relative相対位置の設定で、基準位置はデフォルトで表示される位置
stickyウィンドウのスクロール操作時のエレメントの位置を定義。sectionエレメント、topプロパティ、z-indexプロパティを合わせて使う
initial初期値に戻す
inherit親エレメントの値を継承

備考(Remarks)

初期値(Default value)static
継承(Inherited)No
CSS AnimationNo

Example

 positionの例です。親エレメントに対して相対配置に配置します。