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 | 摘要 |
|---|---|
| static | default値。エレメントに設定されている位置、位置を設定しても反映されない |
| absolute | relative値またはfixed値が設定された親要素の左上端が初期位置、親エレメントに対して絶対配置 |
| fixed | ウィンドウの表示部分の左上端が初期位置、ウィンドウに対して絶対配置 |
| relative | 親要素の左上端が初期位置、親エレメントに対して相対配置 |
| sticky | ウィンドウのスクロール操作時のエレメントの位置を定義。sectionエレメント、topプロパティ、z-indexプロパティを合わせて使う |
| initial | 初期値に戻す |
| inherit | 親要素の値を継承 |
関連プロパティについて
任意に配置位置を設定するには以下のプロパティを併用します。
配置の設定
以下のプロパティを使ってエレメントの表示位置を設定します。
| 関連プロパティ | 摘要 |
|---|---|
| top | 最上端が基準 |
| bottom | 最下端が基準 |
| left | 左端が基準 |
| right | 右端が基準 |
前後位置の設定
z-indexプロパティで、エレメントの前後の表示位置を設定します。
| 関連プロパティ | 摘要 |
|---|---|
| z-index | 前後の表示位置の設定 |