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

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

  • positionabsolute 又は fixed に設定されている場合、 left プロパティは要素の左辺と包含ブロックの左辺との間の距離を指定します。 (包含ブロックは相対配置された祖先の要素です。)
  • positionrelative に設定されている場合、 left プロパティは要素の左辺が通常位置から右方向へ移動する量を指定します。
  • positionsticky に設定されている場合、 left プロパティは要素がビューポート内にある場合は positionrelative であるかのように、外の場合は positionfixed の場合と同様に動作します。
  • positionstatic に設定されている場合、 left プロパティは効果がありません

leftright の両方が定義された場合、要素の位置は過剰指定になります。内包ブロックが左書きの場合 (つまり、 right の計算値が -left に設定されていた場合)、 left の値が優先されます。内包ブロックが右書きの場合 (つまり、 left の計算値が -right に設定されていた場合)、 right の値が優先されます。

構文

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

/* 内包ブロックの幅に対する <percentage> */
left: 10%;

/* キーワード値 */
left: auto;

/* グローバル値 */
left: inherit;
left: initial;
left: unset;

<length>
負、null、または正の <length> で、以下のものを表します。
  • 絶対位置指定要素の場合は、包含ブロックの左辺までの距離。
  • 相対位置指定要素の場合は、通常の位置からの右方向への移動量。
<percentage>
包含ブロックの幅に対する <percentage> です。
auto
以下のように指定します。
  • 絶対位置指定要素では、要素の位置は right プロパティに基づいて決まり、 width: auto は内容物の幅に基づいて決まります。また、 rightauto であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。
  • 相対位置指定要素では、通常の位置から要素までの距離は right に基づきます。また、 rightauto であった場合は、水平方向には移動しません。
inherit
値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は <length>, <percentage>, 又は auto キーワードと同様に扱われます。

形式文法

<length> | <percentage> | 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 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>
</div>

実行例

仕様書

仕様書 状態 備考
CSS Transitions
left の定義
草案 left をアニメーション可能として定義
CSS Positioned Layout Module Level 3
left の定義
草案 sticky の位置の動作を追加
CSS Level 2 (Revision 1)
left の定義
勧告 初回定義

初期値auto
適用対象配置された要素
継承なし
パーセンテージ包含ブロックの幅
メディア視覚
計算値長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto
アニメーションの種類length または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 5.5Opera 完全対応 5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報

ドキュメントのタグと貢献者

最終更新者: mfuji09,