top

positionプロパティでrelative、absolute、fixedを指定したとき、上端からの移動距離を指定します。positionプロパティの指定がない場合や、値がstaticの時は、topの指定は無効となるようです。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ position : 値; top : 値; }

▲PageTop

指定できる値

・topの値
値 初期値 意味
auto ○ 自動配置されます。つまりpositionプロパティを指定しないときと同等です。
数値+単位 上端からの移動距離を指定します。単位例：px,em,ex,%(負の数値も指定できます。)
inherit 親要素の値を継承します。

・positionの値(詳細：position)
値 初期値 意味
static ○ 自動配置されます(通常の配置方法)。
この値を指定した場合、「top、bottom、left、right」プロパティの指定は無効になります。
absolute このプロパティを指定すると、他の要素に関係なく、ウィンドウの上端、下端、左端、右端からそれぞれ「top、bottom、left、right」プロパティで指定した位置に配置されます。尚、位置の算出において、ブラウザには各固有の余白があり、それぞれの表示位置には若干のズレが生じるようです。
relative 本来表示される位置から、相対的に配置位置を指定します。
このプロパティを指定すると、本来表示される場所には、相応の空間が空くようです。「top、bottom、left、right」の各プロパティに指定した値が正の数の場合は、それぞれ、本来表示される位置の上端から下、下端から上、左端から左端、右端から右端までの距離を意味します。fixedやabsoluteとは違い、ブラウザ固有の余白は含めない配置となるようです。
fixed absolute指定と同様に、ウィンドウの上端、下端、左端、右端からそれぞれ「top、bottom、left、right」プロパティで指定した位置に配置され、かつスクロールを行っても表示位置が変わりません。但し、InternetExploreは未対応です。
尚、位置の算出において、ブラウザには各固有の余白があり、それぞれの表示位置には若干のズレが生じるようです。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        position : absolute;
        top : 50px;
        background-color : FF0000;
        width : 300px;
        height: 100px;
      }
      #sample2 {
        position : relative;
        top : 250px;
        background-color : #00FFFF;
        width : 300px;
        height: 100px;
      }
      #sample3 {
        position : fixed;
        top : 100px;
        background-color : #FFFF00;
        width : 300px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="sample1">sample1 absolute top50px</div>
    <div id="sample2">sample2 relative top250px</div>
    <div id="sample3">sample3 fixed top100px</div>
  </body>
</html>

表示結果

サンプルコードの表示

▲PageTop

関連項目

CSS

position / bottom / left / right

▲PageTop

▲