left

試してみましょう

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;
}

構文

/* <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 の値が優先されます。

公式定義

形式定義

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

<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

#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;
}

結果

仕様書

ブラウザーの互換性

関連情報

• inset: 関連するすべてのプロパティである top, bottom, left, right の一括指定
• 対応する論理的プロパティ: inset-block-start, inset-block-end, inset-inline-start, inset-inline-end および一括指定の inset-block と inset-inline
• position