Position
要素の配置方法を指定します。
配置方法を指定しないと、「TOP」や「LEFT」などのプロパティーを指定できません。「POSITION」を指定することで、DTPやWordのようにコンテナとして要素を自由な位置に配置できます。
配置方法は、キーワードで指定します。親要素と相対的に配置する「RELATIVE」と、絶対的位置に配置する「ABSOLUTE」があります。指定していない場合は、「STATIC」になります。この場合、「TOP」や「LEFT」などを指定しても反映されません。
●関連プロパティ
TOP & BOTTOM | LIGHT & LEFT | WIDTH | HEIGHT
{ position : relative | absolute }
相対的に配置
前に記述した要素を基準に、相対的に配置します。
通常の表示と同じ効果です。
サンプルは、最初top: 60px・left: 80pxの位置にテキストを配置。次にtop: 100px・left: 80pxの位置のDIVにテキストを配置した場合です。DIVのトップの位置は、要素の位置-手前の要素の位置で100px−60pxとなり最初のテキストと40pxの空き
の位置になります。
●2番目の要素の位置の計算方法
手前の要素の位置+手前の要素の高さ+（要素の位置-手前の要素の位置）
{ position : relative }
h1 { font-size:
16.0pt;
font-family:
Arial, Helvetica;
color:
rgb(77,77,77); }
h1.title-1 { position: relative;
top: 60px;
left: 40px;
margin:
0px 0px;
border:
1px solid rgb(255,102,0); }
h1.title-2 { margin: 0px 0px; }
div.box { position: relative;
top: 100px;
left: 80px; width: auto; height: auto;
margin:
0px 0px;
border:
1px solid rgb(102,102,255); }
<h1 class="title-1">Position Absolute.<br>
Top 60px. Left 80px.</h1>
<div class="box">
<h1 class="title-2">Position Absolute.<br>
Top 20px. Left 60px.</h1>
</div>
絶対的に配置
親要素を基準に、絶対的位置に配置します。
DTPやWordのコンテナと同じ機能になり、任意の位置に要素を配置できます。 また、<BODY>に指定すれば、ブラウザの余白を調節することできます。
サンプルは、最初top: 24px・left: 60pxの位置にテキストを。次にtop: 120px・ left: 120pxのDIVの中に テキストを配置しました。
相対値と異なり各要素は、指定された位置に配置されます。
{ position : absolute }
h1 { color:
rgb(77,77,77);
font-size:
18.0pt;
font-family:
Arial, Helvetica;
margin:
0px 0px; padding: 20px; }
h1.title-1 { position: absolute;
top: 40px;
left: 60px;
border:
1px solid rgb(255,102,0); }
h1.title-2 { margin: 0px 0px; }
div.box { position: absolute;
top: 120px;
left: 160px; width: auto; height: auto;
margin:
0px 0px;
border:
1px solid rgb(102,102,255); }
<h1 class="title-1">Absolute<br>Top 40px<br>Left 60px</h1>
<div class="box">
<h1 class="title-2">Absolute<br>Top 120px<br>Left 120px</h1>
</div>
 |
 |
|---|
