top：上からの配置位置（距離）を指定する

適用対象	位置指定が有効な要素
継承	しない

topプロパティは、positionプロパティで指定した要素の配置方法（基準位置）を基に、上からの配置位置を指定するために使用します。topプロパティは、positionプロパティの値がstatic以外のときに有効となります。

上からの距離：topプロパティ
右からの距離：rightプロパティ
下からの距離：bottomプロパティ
左からの距離：leftプロパティ
重なる順序　：z-indexプロパティ

topに与えられる値

top: auto;: 自動的に配置します。これが初期値です。
top: 数値で指定する;: [px]や[em]などの任意の単位に数値を指定して位置を決めます。
top: 値%;: 親要素の幅・高さに対する割合を％で指定します。

topの使用サンプル

CSS

.box_sample01 {
 position: relative;
 height: 300px;
 border: 1px solid #333333;
 padding: 5px;
}
.box_sample02 {
 position: absolute;
 top: 30px;
 left: 30px;
 height: 100px;
 border: 1px solid #666666;
 background-color: #FFCCCC;
 padding: 5px;
}
.box_sample03 {
 position: absolute;
 top: 100px;
 left: 100px;
 height: 100px;
 border: 1px solid #666666;
 background-color: #CCCCFF;
 padding: 5px;
}

XHTML

<div class="box_sample01">
box_sample01 [position: relative;]<br />

<div class="box_sample02">
box_sample02 [position: absolute;]<br />
top:30px;, left:30px;<br />
</div>

<div class="box_sample03">
box_sample03 [position: absolute;]<br />
top:100px;, left:100px;<br />
</div>

</div>

表示確認

box_sample01 [position: relative;]

box_sample02 [position: absolute;]
top:30px;, left:30px;

box_sample03 [position: absolute;]
top:100px;, left:100px;