CSS3スタイル虎の巻

top

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

解説

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

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

構文

構文は以下になります。

top: 値;

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

説明
数値pxやemなどの単位と共に数値で指定する
(例)上側から100pxの位置に表示する→top:100px;
割合割合で指定する
(例)親要素に対して上側から30%の位置に表示する→top:30%;
※親要素のサイズに対しての割合になります。
auto自動で位置を指定する(デフォルト)
(例)top:auto;

太字の値は初期値です。

サンプル

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


.d1{
  position:relative;
  height:100px;
}
.d2{
  position:absolute;
  top:50px;
}

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

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


.d1{
  position:relative;
  height:100px;
}
.d2{
  position:absolute;
  top:30%;
}

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

備考

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

関連項目

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