position プロパティ
position プロパティは、エレメントの位置を指定するプロパティです。親エレメントに対して絶対位置や相対位置、ウィンドウに対して絶対位置の設定やスクロールの操作時の位置を定義することができます。
もしも absolute 値を指定する場合は、親エレメントに position:relative; または fixed 値を指定します。親エレメントが position:static; では window の表示部分の左端が基準になります。
position: relative;
top: 50px;
left: 100px;
関連プロパティ
配置位置を設定するには以下のプロパティを併用します。
配置の設定
以下のプロパティを使ってエレメントの表示位置を設定します。
前後位置の設定
z-indexプロパティで、エレメントの前後の表示順を設定します。
| 関連プロパティ | 摘要 |
|---|---|
| z-index | 前後の表示順 |
ページ内 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 | 摘要 |
|---|---|
| static | default値。エレメントに設定されている位置、位置を設定しても反映されない |
| absolute | 絶対位置の設定で、基準位置はウィンドウの上端。親エレメント（親要素）にpositon:static;以外が設定されていれば親エレメントの上端になる |
| fixed | 絶対位置の設定でスクロールに影響を受けない。ウィンドウ上の表示位置が固定される。基準位置はウィンドウの上端 |
| relative | 相対位置の設定で、基準位置はデフォルトで表示される位置 |
| sticky | ウィンドウのスクロール操作時のエレメントの位置を定義。sectionエレメント、topプロパティ、z-indexプロパティを合わせて使う |
| initial | 初期値に戻す |
| inherit | 親エレメントの値を継承 |
備考（Remarks）
| 初期値（Default value） | static |
| 継承（Inherited） | No |
| CSS Animation | No |
Example
positionの例です。親エレメントに対して相対配置に配置します。