left

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

left は CSS のプロパティで、位置指定要素の水平位置の決定に関与します。位置指定されていない要素には効果はありません。

試してみましょう

left: 0;

left: 4em;

left: 10%;

left: 20px;

<section id="default-example"> <div class="example-container"> <div id="example-element">I am absolutely positioned.</div> <p> As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. </p> </div> </section>

.example-container { border: 0.75em solid; padding: 0.75em; text-align: left; position: relative; width: 100%; min-height: 200px; } #example-element { background-color: #264653; border: 4px solid #ffb500; color: white; position: absolute; width: 140px; height: 60px; }

構文

css

/* <length> 値 */ left: 3px; left: 2.4em; /* 包含ブロックの幅に対する <percentage> */ left: 10%; /* キーワード値 */ left: auto; /* グローバル値 */ left: inherit; left: initial; left: revert; left: revert-layer; left: unset;

値

<length>

負、null、または正の <length> で、以下のものを表します。

絶対位置指定要素の場合は、包含ブロックの左辺までの距離。
相対位置指定要素の場合は、通常の位置からの右方向への移動量。

<percentage>

包含ブロックの幅に対する <percentage> です。

auto

以下のように指定します。

絶対位置指定要素では、要素の位置は right プロパティに基づいて決まり、 width: auto は内容物の幅に基づいて決まります。また、 right も auto であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。
相対位置指定要素では、通常の位置から要素までの距離は right に基づきます。また、 right も auto であった場合は、水平方向には移動しません。

inherit

値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は <length>, <percentage>, または auto キーワードと同様に扱われます。

解説

left の効果は、要素がどの様に配置されているか（つまり、 position プロパティの値）によって変わります。

position が absolute または fixed に設定されている場合、 left プロパティは要素の左辺の外側のマージンと、包含ブロックの左辺の内側のマージンとの間の距離を指定します。（包含ブロックは相対配置された祖先の要素です。）
position が relative に設定されている場合、 left プロパティは要素の左辺が通常位置から右方向へ移動する量を指定します。
position が sticky に設定されている場合、 left プロパティは sticky 制約の矩形を計算するために使用されます。
position が static に設定されている場合、 left プロパティは効果がありません。

left と right の両方が定義されていて、幅の制約がない場合、要素は両方を満たすように伸縮されます。要素が両方を満たすように伸縮できない場合、要素の位置は過剰指定になります。このような場合、包含ブロックが左書きの場合は left の値が優先され、包含ブロックが右書きの場合は right の値が優先されます。

公式定義

初期値	`auto`
適用対象	位置指定要素
継承	なし
パーセント値	包含ブロックの幅に対する相対値
計算値	長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
アニメーションの種類	length またはパーセント値, calc();

形式定義

left = 
 auto |
 <length-percentage> |
 <anchor()> |
 <anchor-size()> 

<length-percentage> = 
 <length> |
 <percentage> 

<anchor()> = 
 anchor( <anchor-name>? &&
 <anchor-side> , <length-percentage>? ) 

<anchor-size()> = 
 anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? ) 

<anchor-name> = 
 <dashed-ident> 

<anchor-side> = 
 inside |
 outside |
 top |
 left |
 right |
 bottom |
 start |
 end |
 self-start |
 self-end |
 <percentage> |
 center 

<anchor-size> = 
 width |
 height |
 block |
 inline |
 self-block |
 self-inline

例

位置指定要素

HTML

html

<div id="wrap"> <div id="example_1"> <pre> position: absolute; left: 20px; top: 20px; </pre> <p> The only containing element for this div is the main window, so it positions itself in relation to it. </p> </div> <div id="example_2"> <pre> position: relative; top: 0; right: 0; </pre> <p>Relative position in relation to its siblings.</p> </div> <div id="example_3"> <pre> float: right; position: relative; top: 20px; left: 20px; </pre> <p>Relative to its sibling div above, but removed from flow of content.</p> <div id="example_4"> <pre> position: absolute; bottom: 10px; right: 20px; </pre> <p>Absolute position inside of a parent with relative position</p> </div> <div id="example_5"> <pre> position: absolute; right: 0; left: 0; top: 200px; </pre> <p>Absolute position with both left and right declared</p> </div> </div> </div>

CSS

css

#wrap { width: 700px; margin: 0 auto; background: #5c5c5c; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } #example_1 { width: 200px; height: 200px; position: absolute; left: 20px; top: 20px; background-color: #d8f5ff; } #example_2 { width: 200px; height: 200px; position: relative; top: 0; right: 0; background-color: #c1ffdb; } #example_3 { width: 600px; height: 400px; position: relative; top: 20px; left: 20px; background-color: #ffd7c2; } #example_4 { width: 200px; height: 200px; position: absolute; bottom: 10px; right: 20px; background-color: #ffc7e4; } #example_5 { position: absolute; right: 0; left: 0; top: 100px; background-color: #d7ffc2; }

結果

仕様書

Specification
CSS Positioned Layout Module Level 3 # insets

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月21日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content