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

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値。エレメントに設定されている位置、位置を設定しても反映されない
absoluterelative値またはfixed値が設定された親エレメントの左上端が初期位置、親エレメントに対して絶対配置
fixedウィンドウの表示部分の左上端が初期位置、ウィンドウに対して絶対配置
relative親エレメントの左上端が初期位置、親エレメントに対して相対配置
stickyウィンドウのスクロール操作時のエレメントの位置を定義。sectionエレメント、topプロパティ、z-indexプロパティを合わせて使う
initial初期値に戻す
inherit親エレメントの値を継承

備考（Remarks）

初期値（Default value）static
継承（Inherited）No
CSS AnimationNo

Example

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