left

leftは、左側からの位置を指定するスタイルです。

解説

leftを指定する時は、positionの指定も必須です。
（positionの値はstatic以外）
positionで指定した位置を基準として、左側の位置が決定されます。

親要素の位置を基準としたい場合は、親要素にも positionの指定が必要です。
（値はstatic以外）

構文

構文は以下になります。

値

leftには以下の値が指定できます。

太字の値は初期値です。

サンプル

左側から50pxの位置に表示する

.d1{
  position:relative;
  height:60px;
}
.d2{
  position:absolute;
  left:50px;
}

<div class="d1">
  <div class="d2">あいうえお</div>
</div<

親要素に対して左側から30%の位置に表示する

.d1{
  position:relative;
  height:60px;
}
.d2{
  position:absolute;
  left:30%;
}

<div class="d1">
  <div class="d2">あいうえお</div>
</div<

備考

• 同時にposition（値はstatic以外）を指定しないと、leftは有効になりません。
• 横方向の位置を指定したい場合は left、rightを使用します。
• 縦方向の位置を指定したい場合は top、bottomを使用します。

関連項目

• position：要素を表示する時の基準位置を指定する
• top：上側からの位置を指定する
• bottom：下側からの位置を指定する
• left：左側からの位置を指定する
• right：右側からの位置を指定する

Tweet