ywork2020.com

Title

上基準位置から位置指定要素の垂直位置を設定する

目次 (INDEX)

topとは

ここで説明する top とは次の語句からなるCSSのプロパティです。
top
読み: トップ
意味: 上、上側、高い

目次に戻る

topプロパティの概要

このプロパティは、位置指定要素の垂直位置を指定することができます。

位置指定要素とは position プロパティによって基準位置を指定された要素のことをいいます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{top: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

ここでは、position プロパティに relative キーワードを設定したdiv要素を題材にします。 relative は自身の元の位置から相対計算による位置を決定するためのキーワードです。

目次に戻る

初期値: auto

初期値の auto は、自動で位置を計算します。

これは bottom プロパティの設定の影響を受けます。

div{
	background-color: ##pink;
	border: thin solid ##red;
	height: 200px;
	width: 200px;
	position: relative;
	top: auto;
}

目次に戻る

数値: 単位付き数値でポジションを指定する

単位付き数値でポジションを指定した場合、その通りの垂直位置に配置されます。

div{
	background-color: ##pink;
	border: thin solid ##red;
	height: 200px;
	width: 200px;
	position: relative;
	top: 100px;
}

目次に戻る

パーセンテージ値: パーセントでポジションを指定する

パーセントでポジションを指定した場合、親要素の height の値にパーセンテージ値を掛けた位置に配置されます。

div{
	background-color: ##pink;
	border: thin solid ##red;
	height: 200px;
	width: 200px;
	position: relative;
	top: 25%;
}

目次に戻る

グローバル値

topプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のautoに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{top: グローバル値;}

目次に戻る

補足説明

  • 位置指定要素に適用可能
  • 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

top: auto;

top: 20px;

top: 50px;

top: 25%;

top: 50%;

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る