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

leftプロパティ

 leftプロパティは、エレメントの上からの左右位置を設定することができます。ただし、positionプロパティが必要で、positionプロパティの値によっても表示に変化があります。

position:static;は、leftプロパティが設定されてもエレメントの配置に影響しません。

position:absolute;は絶対位置の設定で、leftプロパティによって左右配置を設定できます。基準位置はウィンドウの左端ですが、親要素にpositon:static;以外が設定されていれば親要素の左端です。

position:fixed;は絶対位置の設定でスクロールに影響を受けません。leftプロパティによって左右配置を設定できます。基準位置はウィンドウの左端です。

position:relative;は相対位置の設定で、leftプロパティによって左右配置を設定できます。基準位置は、position:static;で表示される位置です。

position:sticky;はスクロールに影響を受けるために、leftプロパティはposition:sticky;によって位置が固定された時の左右配置です。位置が固定されていない間はleftプロパティは影響しません。

構文(Syntax)

CSS

left: [ auto | length | % ];

DOM(JavaScript)

値の取得
object.style.left;
値の設定
object.style.left="[ auto | length | % ]";

Values

Value摘要
autodefault値。エレメントの初期配置です。
length数値による設定。px、pt、pcなどの単位を合わせる。
%親要素またはウィンドウの高さ全体の割合。
initial初期値に戻す。
inherit親要素(親エレメント)のプロパティを継承する。

Remarks(備考)

Default valueauto
Inherited(継承)no
CSS Animationyes

Example