【left】左からの距離(位置)を指定

leftプロパティでは、相対配置や絶対配置、または固定配置での基準となるボックス(基準位置)からの、左からの配置位置(指定した要素の移動距離)を指定することができます。

(基準となるボックスから指定した要素のボックスまでの距離を設定することで、その要素が配置される位置を設定できます)

また左からの距離(位置)とは、基準位置の左からleftを指定したボックスの左端までの距離の事となります。 基準位置、距離の計算方法については、positionプロパティに指定する値によって異なり、相対配置の場合は、元の位置の左から移動させる距離、絶対配置の場合は基準ボックスの左から指定したボックスのマージン外側までの距離となります。

なおleftプロパティで指定できるのは基準位置からの距離のみとなりますので、実際に表示位置を指定するためにはpositionプロパティを併用し、配置方法(基準位置)を設定しておく必要がありますので注意して下さい。

leftプロパティは、positionプロパティでstatic以外の値が指定されている要素にのみ反映されます。

書式

  • left : ……… 左からの配置位置を指定

★:実数値+単位、パーセント値+%、auto、inherit

実数値+単位
数値にpxなどの単位をつけて距離を指定します。正の値で指定した場合は基準位置より右方向に、負の値を指定した場合は左方向に移動します
%値
基準となるボックスの幅に対する割合で距離を指定します。なおtop、bottomプロパティの場合は基準となるボックスの高さに対する割合となるので注意して下さい。
auto
自動的に調整されます(初期値)

使用した時の例

.sample00 {
  position: relative;
  left: 10px;
  background:#EEF4FA;
  height:150px;
}
.sample1 {
  position:absolute;
  bottom: 30px;
  left: 20px;
}
<div class="sample00">
position:relative left:10px
  <div class="sample1">absolute bottom:30px left:20px</div>
</div>

ブラウザ上の表示例

position:relative left:10px
absolute bottom:30px left:20px

対応ブラウザなどのデータ

初期値 auto 値の継承 継承しない
適用可能な要素 positionプロパティでstatic以外の値を指定した要素
メディア visual
対応ブラウザ Internet Explorer5.5~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報