position

positionは、要素を表示する時の基準位置を指定するスタイルです。

解説

HTMLでは通常タグの並び順で位置が決まりますが、
positionで基準位置を指定すると任意の位置に要素を配置することができます。

positionスタイルでは基準位置を指定するのみで、
実際の配置位置はtop、bottom、left、rightスタイルで指定します。

構文

構文は以下になります。

値

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

太字の値は初期値です。

サンプル

基準位置を相対値にして、上100px/左100pxの位置に表示する

.sample01 {
  position:relative;
  top:100px;
  left:100px;
}

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

基準位置を絶対値（スクロール連動あり）にして、上100px/左100pxの位置に表示する

.sample02 {
  position:absolute;
  top:100px;
  left:100px;
}

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

基準位置を絶対値（スクロール連動なし）にして、上100px/左100pxの位置に表示する

.sample03 {
  position:fixed;
  top:100px;
  left:100px;
}

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

備考

• 指定した基準位置からの表示位置は top、bottom、left、rightで指定します。

関連項目

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

Tweet