| プロパティ名 | 値 | 適用対象 | 継承 |
|---|---|---|---|
| top: | 距離 | position:static以外の要素 | なし |
| bottom: | 距離 | position:static以外の要素 | なし |
| left: | 距離 | position:static以外の要素 | なし |
| right | 距離 | position:static以外の要素 | なし |
| 値 | 説明 | |
|---|---|---|
| 距離 | 数値 | 数値に単位を付けて距離を指定します。 |
| 数値(%) | 親要素の高さ、または幅に対する距離の割合を%で指定します。 | |
| auto | プラウザが自動的に設定します(デフォルト)。 |
要素を配置する位置は、top,bottom,left,rightプロパティで上下左右からの距離を指定します。距離には数値、数値(%)、autoを指定します。数値を指定する場合は、数値にmm、px、ｅmなどの単位を付けて指定します。相対単位、絶対単位の両方を使用できます。数値は負の値を指定することもできます。
positionプロパティでrelativeを指定した場合、topとleftに正の値を指定すると右下に移動し、負の値を指定すると左上に移動します。反対に、rightとbottomに正の値を指定すると左上に移動し、負に値を指定すると右下に移動します。
数値(%)で指定する場合は、親要素の高さ、（top,bottomの場合)、又は幅(left,rightの場合)に対する距離の割合を指定します。positionプロパティでabsoluteまたはfixedが指定されているときは、ページ全体の高さと幅の割合になります。
距離の指定は、positionプロパティでrelativeが指定されている場合と、absoluteまたはfixedが指定されている場合で、基準となる位置が異なります。
positionプロパティでrelativeを指定した場合、topとleftに正の値を指定すると右下に移動し、負の値を指定すると左上に移動します。反対に、rightとbottomに正の値を指定すると左上に移動し、負に値を指定すると右下に移動します。
数値(%)で指定する場合は、親要素の高さ、（top,bottomの場合)、又は幅(left,rightの場合)に対する距離の割合を指定します。positionプロパティでabsoluteまたはfixedが指定されているときは、ページ全体の高さと幅の割合になります。
距離の指定は、positionプロパティでrelativeが指定されている場合と、absoluteまたはfixedが指定されている場合で、基準となる位置が異なります。
■positionプロパティの値がrelativeの場合
positionプロパティでrelativeが指定されているときは、要素が通常表示される位置を基準にして、そこから上下左右の距離を指定します。
ボックスを表示した後、positionプロパティで値に「relative」を指定して、topとleftを指定すると、
直前に配置したボックスの後ろを基準として配置されます。
■positionプロパティの値がabsolute,fixedの場合
positionプロパティでabsoluteまたはfixedが指定されているときは、親要素のボックス領域の外枠位置(マージンが指定されている
場合は、マージン領域の外側)を基準として、そこから上下左右の距離を指定します。他の要素の中に含まれていない場合、
通常はプラウザの表示領域全体の四辺が基準となります。
positionプロパティで値にabsoluteを指定してtopと、leftを指定すると、直前に配置したボックスの位置に関係なく、
プラウザの左上端を基準として配置されます。
■top,bpttom,left,reightプロパティは、positionプロパティでrelative、absolute,relative、fixedが指定されている時に有効です。
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
body{margin:0}
.sampl{width:200px;
background-color: yellow;
font-size:18px;
text-align:center;
}
p{color:red}
.pos01{position:relative;
top:50px;
left:100px;
}
.pos02{position:absolute;
top:100px;
left:100px;
width:200px;
}
-->
</style>
</head>
<body>
<div class="sampl">金閣寺</div>
<div><img class="pos02"又はclass="pos01" src="画像ファイルＵＲＬ" widht="200" height="150" ></div>
<p>何も配置方法を指定していない、<br>通常の配置です。</p>
</body>
</html>
