WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > top
top  配置 

上からの位置を指定。

このエントリーをはてなブックマークに追加

positionプロパティが未指定・staticの場合は動作しません。

position:relarive; などにしてください。

パラメーター

auto
　自動設定(初期値)。
数値で指定
　数値にpxなどの単位をつけて指定。
%で指定
　親ブロックとの割合から%で指定

サンプルコード position:relative;を指定

<div style="position:relative;top:10px;left:10px;">top:10px;left:10px;</div>
<div style="position:relative;top:20px;left:20px;">top:20px;left:20px;</div>
<div style="position:relative;top:20px;left:20px;">top:20px;left:20px;</div>
top:10px;left:10px;
top:20px;left:20px;
top:20px;left:20px;

サンプルコード position:relative;を指定

<div style="position:relative;top:10px;left:10px;">top:10px;left:10px;</div>
<div style="position:relative;top:20px;left:20px;">top:20px;left:20px;</div>
<div style="position:relative;top:20px;left:20px;">top:20px;left:20px;</div>
top:10px;left:10px; top:20px;left:20px; top:20px;left:20px;


positionの値が未指定・staticの場合

<div style="position:static;top:10px;left:10px;">top:10px;left:10px;</div>
<div style="position:static;top:20px;left:20px;">top:20px;left:20px;</div>
top:10px;left:10px;
top:20px;left:20px;

<div style=";top:10px;left:10px;">top:10px;left:10px;</div>
<div style="top:20px;left:20px;">top:20px;left:20px;</div>
top:10px;left:10px;
top:20px;left:20px;