topプロパティは positionプロパティで位置要素されている要素のボックスの上辺を包含ブロックからどれだけ離すのかを指定します。同じ位置を指定するプロパティは他にも、下辺からの位置を指定する bottomプロパティ、左辺からの位置を指定する leftプロパティ、右辺からの位置を指定する rightプロパティがあります。
位置を指定する際の基点となる部分は、positionプロパティで指定された値によって異なります。詳細は以下の通りです。
position : static ;top", "bottom", "left", "right" の位置を指定するプロパティの効果は無効であり（適用対象にならないため）、その要素が本来レンダリングされる通常通りの位置に配置される。position : relative ;top", "bottom", "left", "right" の各プロパティで要素の配置されている元の位置からどれだけずらすかを指定する相対的な位置指定となる。これを相対配置と呼ぶ。position : absolute ;top", "bottom", "left", "right" の各プロパティで包含ブロックの各辺からどれだけ離すのかを指定する絶対的な位置指定となる（祖先要素に位置指定されている要素がなければ、初期包含ブロックを基準とする）。これを絶対配置と呼ぶ。position : fixed ;absolute" に従って配置された後（つまり、位置指定の基点は "absolute" と同じ）、スクロール機構によって連続的にアクセス可能な連続メディアでは、表示域に対して固定され、スクロールしても動かないようにレンダリングされる。これを固定配置と呼ぶ。"absolute" の説明を補足しておくと、たとえば、デフォルトでは一番最初の包含ブロックである初期包含ブロックは、html要素の各辺が基準になるので、スクロール分も含めてページ全体が基準になります。つまり、topプロパティ・leftプロパティはページの左上が原点に、bottomプロパティ・rightプロパティはページの右下が原点となります。そして、html要素に対して、widthプロパティ, heightプロパティを指定することで、初期包含ブロックの横幅・高さを指定することもできます。
topプロパティに指定できる値は、それぞれ以下の意味を示します。
em", "px" などの単位識別子を伴う数値で指定。%）による割合で指定。autoauto" を指定した場合、上下の位置は bottomプロパティの値によって決まる。bottomプロパティの値も "auto" の場合は、特に指定のない場合と同じ位置にレンダリングされる。その他、関係プロパティの値に依つて効果が異なるため、詳しくは内容領域の高さと垂直方向のマージンを計算する場合の auto と各プロパティの兼ね合いを参照。なお、topプロパティと bottomプロパティの両方に "auto" 以外の値（長さ、またはパーセンテージ値）を指定した場合、topプロパティの値が優先され、bottomプロパティの値は無効となります。つまり、上下の位置を指定する分には topプロパティか bottomプロパティのどちらか一方を指定するだけで良いです。
<img src="map.gif" width="426" height="267" alt="地図" /><br /> <img src="building.gif" width="42" height="53" alt="ビル" style="position : relative ; top : -220px ; left : 118px ;" /> <img src="factory.gif" width="54" height="52" alt="工場" style="position : relative ; top : -110px ; left :150px ;" /> <img src="hospital.gif" width="44" height="44" alt="病院" style="position : relative ; top : -232px ; left : 70px ;" /> <img src="house.gif" width="53" height="44" alt="私の家" style="position : relative ; top : -230px ; left : -120px ;" /> <img src="park.gif" width="53" height="52" alt="遊園地" style="position : relative ; top : -300px ; left : -25px ;" /> <img src="police.gif" width="53" height="53" alt="警察署" style="position : relative ; top : -130px ; left : 30px ;" /> <img src="resta.gif" width="47" height="54" alt="レストラン" style="position : relative ; top : -300px ; left : -50px ;" /> <img src="school.gif" width="54" height="52" alt="学校" style="position : relative ; top : -220px ; left : 5px ;" />
この機能を使えば、画像などを好きな位置に配置して、要素同士を重ね合わせることも可能です。