mozilla
Your Search Results

    left

    概要

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

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

    • 初期値auto
    • 適用対象位置指定された要素
    • 継承しない
    • 相対値の基準包含ブロックの幅
    • メディアvisual
    • 計算値長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto
    • アニメーションの可否可能。長さ、パーセンテージ、calc() として可能。どちらも長さなら長さとして補間。どちらもパーセンテージならパーセンテージとして補間。それ以外では、両方の値は 長さとパーセンテージの合計(各値はゼロかもしれません)を計算する calc() 関数に変換されます。これらの calc() 関数は、それぞれ補間結果を実数として持っています。

    構文

    形式文法: <length> | <percentage> | auto
    
    left: 3px         /* <length> 値 */
    left: 2.4em
    
    left: 10%         /* 包含ブロックの幅に対する <percentages> */
    
    left: auto
    
    left: inherit
    

    <length>
    次の意味を持つ負、null、または正の <length>:
    • 絶対位置指定要素 では、包含ブロックの左辺との距離
    • 相対位置指定要素 では、位置指定されなかった場合に通常フローで決まる位置からの左方向への移動量
    <percentage>
    包含ブロックに対する <割合> で、概要に書かれたような使い方をします。
    auto
    次の意味を持つキーワードです:
    • 絶対位置指定要素では、right に基づく位置。width: auto は、コンテンツに基づく幅とみなします。
    • 相対位置指定要素では、right に基づく元々の位置からの移動量。rightauto である場合はまったく移動しません。
    inherit
    親要素(包含ブロックではないかもしれません)からの計算値と同じ値であることを示すキーワードです。そして、この計算値は <length><割合>、または 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>

    実際の表示例

    仕様書

    仕様書 策定状況 コメント
    CSS Transitions 草案 left をアニメーション可能として定義。
    CSS Level 2 (Revision 1) 勧告  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 1.0 1.0 (1.7 or earlier) 5.5 5.0 1.0
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート 1.0 1.0 (1) 6.0 6.0 1.0

    参照

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

    Contributors to this page: sosleepy, ethertank
    最終更新者: ethertank,
    サイドバーを隠す