left:位置指定の条件に応じて左からの距離を決定する

初期値 auto
適用対象 位置指定された要素
継承 しない
アニメーション <length>値、<percentage>値、calc();
対応ブラウザ caniuseで確認

leftプロパティの説明

leftは、位置指定された要素の包含ブロックの左辺からの距離を指定します。これは、対象となる要素にpositionが与えられており、かつその値がstatic以外の場合に有効となります。

この機能の振る舞いは位置指定の状態に影響を受けます。具体的な特徴は以下の通りです。

  • positionの値がabsoluteまたはfixedの場合、leftは包含ブロックの左辺からの距離を決定します
  • positionの値がrelativeの場合、leftは親要素の左辺から右へ移動する量を決定します
  • positionの値がstickyの場合、leftは粘着する包含ブロックの左辺からの位置を決定します
  • positionの値がstaticの場合、leftは無効になります

位置指定に関するプロパティには以下のものがあり、これを複数組み合わせて使用します。

leftに指定できる値

auto
既定値に従います。rightが指定されていた場合は、その値が採用されます。
<length>
包含ブロックの左辺との距離を数値と長さの単位で指定します。一般的にはpxやemを使用します。
<percentage>
包含ブロックの幅に対する割合で配置位置を指定します。

leftの使い方とサンプル

leftプロパティの構文は以下の通りです。

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

/* <length>値 */
left: 10px;
left: -10px;
left: 1.8em;
left: 5vw;

/* <percentage>値 */
left: 10%;
left: -10%;

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

それでは簡単な例を見てみましょう。包含ブロックの中に複数の要素を配置し、それぞれの位置を調整すると以下のように表示されます。

CSS
#sample_box {
	position: relative;
	width: 240px;
	height: 200px;
	background-color: #ccc;
}
div > div {
	position: absolute;
	width: 50px;
	height: 50px;
}
#item1 {
	top: 10px;
	left: 10px;
	background-color: #fc605b;
}
#item2 {
	top: 4em;
	left: 4em;
	background-color: #76fc5b;
}
#item3 {
	bottom: 50%;
	left: 50%;
	background-color: #5b96fc;
}
HTML
<div id="sample_box">
	<div id="item1">1</div>
	<div id="item2">2</div>
	<div id="item3">3</div>
</div>
表示確認

位置指定をした要素が重なる場合は、カスケードの優先順位が高い方が手前に表示されます。

CSS
#sample_box {
	position: relative;
	height: 240px;
	padding: 5px;
	border: 1px solid #666;
}
div > div {
	position: absolute;
	min-width: 200px;
	height: 100px;
	padding: 5px;
	border: 1px solid #999;
}
#item1 {
	top: 30px;
	left: 30px;
	background-color: #ffcccc;
}
#item2 {
	top: 100px;
	left: 100px;
	background-color: #ccccff;
}
HTML
<div id="sample_box">
	sample_box

	<div id="item1">
		item1<br>
		・top:30px;<br>
		・right:30px;<br>
	</div>

	<div id="item2">
		item2<br>
		・top:100px;<br>
		・right:100px;<br>
	</div>

</div>
表示確認

leftに関連するCSSプロパティ

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート(float)の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left 位置指定で配置された要素の左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align ボックス内のインライン要素に縦位置を揃える基準を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する