top

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

解説

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

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

構文

構文は以下になります。

値

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

太字の値は初期値です。

サンプル

上側から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：右側からの位置を指定する

Tweet