top 【上からの配置位置】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]

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

auto
自動的に配置します。これが初期値です。

数値で指定する
pxやemなど、任意の単位に数値を指定して位置を決めます。

％で指定する
親要素の幅・高さに対する割合を％で指定します。

topの使用例

CSSファイル

.sample001 {
 position: relative;
 width: 300px;
 height: 300px;
 background-color: #ffcccc;
 margin: 10px;
}
.sample002 {
 position: absolute;
 top: 80px;
 left: 0px;
 width: 150px;
 height: 100px;
 background-color: #ccccff;
}

HTMLソース

<div class="sample001">
positionプロパティ：親要素にrelative
<div class="sample002">absolute<br />top: 80px;<br />left: 0px;<br />
上から80pxの位置</div>
</div>

表示すると

表示・配置関連項目

overflow(x y)	はみ出た内容の表示方法を指定する
position	要素の配置方法を指定する
top	上からの配置位置(距離)を指定する
right	右からの配置位置(距離)を指定する
bottom	下からの配置位置(距離)を指定する
left	左からの配置位置(距離)を指定する
display	要素の形式(ブロック・インライン)を指定する
float	左寄せ、右寄せ配置の指定
clear	回り込み(float)を解除する
z-index	重なりの順序を指定する
visibility	ボックスの表示・非表示を指定する
clip	ボックスを切り抜き表示(クリッピング)する
direction	文字表記の方向(左右)を指定する
unicode-bidi	Unicodeの文字表記の方向を上書きする
writing-mode	文字表記の方向(縦横)を指定する(IE独自)

戻る

TOP

Copyright © digilog. All Rights Reserved.