Top & Bottom
要素を配置する上や下からの位置を指定します。
このプロパティを実行する場合、要素にPOSITIONプロパティでABSOLUTEかRELATIVEを指定していなければなりません。
BOTTOMは、IE5.0から対応しています。
●関連プロパティ
POSITION | LIGHT & LEFT | WIDTH | HEIGHT
{ top : absolute size | percentage | auto }
{ bottom : absolute size | percentage | auto }
上から数値で指定
要素を配置する上からの位置を、数値で指定します。
サンプルは、上から20pxに＜DIV＞を配置しました。背景画像の罫線ピッチは、10pxです。
{ top : absolute size }
<div style="position: relative; height: 60px; width: 400px;">
<div style="top: 20px; position: absolute;">Top 20px</div>
</div>
上からパーセントで指定
要素を配置する下からの位置を、パーセントで指定します。
サンプルは、高さ80pxの親要素の<DIV>の中に、上から50%の位置に＜DIV＞を配置しました。親の高さ80pxですから、上から40pxの位置になっています。
{ top : percentage }
<div style="position: relative; height: 60px; width: 400px;">
<div style="top: 50%; position: absolute;">Top 50%</div>
</div>
下から数値で指定
要素を配置する下からの位置を、数値で指定します。
サンプルは、ページの下から80pxに配置しました。背景画像の罫線ピッチは、10pxです。
{ bottom : absolute size }
bottom: 80px;
<div style="position: relative; height: 60px; width: 400px;">
<div style="bottom: 20px; position: absolute;">Bottom
20px</div>
</div>
下からパーセントで指定
要素を配置する下からの位置を、パーセントで指定します。
サンプルは、ページの下から20%の位置に配置しました。ページの高さ300pxですから、下から60pxの位置になっています。
{ bottom : percentage }
bottom: 50%;
<div style="position: relative; height: 60px; width: 400px;">
<div style="bottom: 50%; position: absolute;">Bottom 50%</div>
</div>
 |
 |
|---|
