絶対配置の <div> 要素の左端を、最も近くに配置された祖先の左端の右 80px に設定します:
div.absolute {
position: absolute;
left: 80px;
width: 200px;
height: 120px;
border: 3px solid #8AC007;
}
Try it Yourself ❯
絶対配置の要素に対する left プロパティは、最も近くに配置された祖先の左端から左/右へ離す量を設定します。
注: 絶対配置の要素に "positioned" 配置の親がない場合は、文書の body が使われ、ページスクロールすると一緒に移動します。
注: "positioned" 要素とは、static 配置以外のものです。
相対配置の要素に対する left プロパティは、要素の左端を通常位置から左/右へ離す量を設定します。
注: "position:static" の場合、left プロパティの効果がありません。
デフォルト値: | auto |
---|---|
継承: | 継承する |
アニメーション可否: | 可。animatable を参照 Try it |
バージョン: | CSS2 |
JavaScript 構文: | object.style.left="100px" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
プロパティ | |||||
---|---|---|---|---|---|
left | 1.0 | 5.5 | 1.0 | 1.0 | 5.0 |
left: auto|length|initial|inherit;
値 | 説明 | Play it |
---|---|---|
auto | 左端の位置をブラウザが計算します。これがデフォルトです | Play it ❯ |
length | px、cm 等で左端の位置を設定します。マイナスの数値が使用できます | Play it ❯ |
% | 包含要素の % で左端の位置を設定します。マイナスの数値が使用できます | Play it ❯ |
initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
inherit | このプロパティは親要素を継承します。inherit を参照 |
CSS チュートリアル: CSS Positioning
CSSリファレンス:right プロパティ
CSSリファレンス:bottom プロパティ
CSSリファレンス:top プロパティ
HTML DOM リファレンス:left プロパティ