上端から下方向の位置を指定する

top

CSSの書き方

top:値 ;

CSSの詳細情報
プロパティ名 top 読み方 トップ
初期値 auto 意味 基準点上端からの距離
auto/サイズ指定
対象 位置を定められる要素
CSSレベル CSSレベル2 対応ブラウザ Windows MAC
継承 しない IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

基準点の上端からの距離を指定するためのスタイルシートです。

通常は、ボックス要素の基準点を定める「position」プロパティと併用します。

「top」プロパティで指定できる値は、「auto」または「サイズ(数値)」による指定です。

「top:auto;」とした場合、隣接するボックスとの関係で決定されます。

数値による指定は、正(プラス)の値と負(マイナス)の値どちらでも指定できます。

プラスの値で指定した場合は、基準点から下向きに、マイナスの値で指定した場合は上向きに動きます。

数値ではないパーセント等による指定はできません。

CSS/HTMLサンプル

div { position:relative; top:15px; left:10px; }
p { width:500px; }
p.rel { position:relative; top:70px; left:30px; background:#ffdff9;}
p.abs1 { position:absolute; top:15px; left:60px; background:#f6f6f6;}
p.abs2 { position:absolute; top:20px; left:360px; background:#accbfd;}
p.fix { position:fixed; right:0px; bottom:0px; background:#fea381;}

クラスを指定した各段落要素の配置を指定 サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!