left

概要

CSS の left プロパティは、位置指定された要素の位置を定義します。

絶対位置指定要素（ position が absolute または fixed である要素）では、包含ブロックの左辺と、要素のマージン境界の左辺との距離を定義します。

構文

形式文法: <length> | <percentage> | auto

left: 3px         /* <length> 値 */
left: 2.4em

left: 10%         /* 包含ブロックの幅に対する <percentages> */

left: auto

left: inherit

値

<length>

次の意味を持つ負、null、または正の <length>:

• 絶対位置指定要素 では、包含ブロックの左辺との距離
• 相対位置指定要素 では、位置指定されなかった場合に通常フローで決まる位置からの左方向への移動量

<percentage>

包含ブロックに対する <percentage> で、概要に書かれたような使い方をします。

auto

次の意味を持つキーワードです:

• 絶対位置指定要素では、right に基づく位置。width: auto は、コンテンツに基づく幅とみなします。
• 相対位置指定要素では、right に基づく元々の位置からの移動量。right も auto である場合はまったく移動しません。

例

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

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 positions itself 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;
        top: 10px;
        left: 20px;
      </pre>
      <p>Absolute position inside of a parent with relative position</p>
    </div>
  </div>
</div>

実際の表示例

仕様書

ブラウザ実装状況