備忘録的リファレンス

positionプロパティ

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

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

構文(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親要素の値を継承

関連プロパティについて

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

配置の設定

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

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

前後位置の設定

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

関連プロパティ摘要
z-index前後の表示位置の設定