position
ボックス要素の基準位置

unknown

positionプロパティは、ボックス要素（p要素やdiv要素など）の基準位置を指定します。 生成内容を除く、すべての要素に指定可能です。

positionプロパティで指定した基準位置からのどの方向にどれくらいずらした場所に配置するかは、オフセットプロパティ（top、right、bottom、left）を使用して指定します。 オフセットプロパティには負の値も指定可能です。

positionプロパティのデフォルト値は、staticです。
オフセットプロパティのデフォルト値は、すべてautoです。

オフセットプロパティは、positionプロパティの値がstaticの場合は使用できません。

static

<style type="text/css">
	div.parent_static {
		position:static;
		top:100px; left:100px;
		background-color:silver; margin:0; padding:5px; width:430px;
	}
	div.chiled_static {
		position:static;
		top:1000px; left:100px;
		background-color:yellow; margin:0; padding:5px; width:430px;
	}
</style>

<div class="parent_static">
	【親要素】position:static を指定しています。
	<div class="chiled_static">
		【子要素】position:static を指定しています。<br>
		static を指定すると、top、left、bottom、right で指定した値は無視されます。
	</div>
</div>

absolute

<style type="text/css">
	div.parent {
		position:absolute;
		bottom:10px; right:10px;
		background-color:silver; margin:0; padding:5px; width:430px;
	}
	div.chiled {
		position:absolute;
		top:100px; left:-100px;
		background-color:yellow; margin:0; padding:5px; width:430px;
	}
</style>

<div class="parent">
	【親要素】position:absolute を指定しています。<br>
	right、bottom プロパティで位置指定しています。
	<div class="chiled">
		【子要素】position:absolute を指定しています。<br>
		親要素にテキスト部分が含まれていても無視されます。
		この例では、top、left プロパティで位置指定しているので、常に親要素の左上端が基準位置となります。
	</div>
</div>

<script type="text/javascript">
	for(var i=0; i<50; i++){ document.write("LINE "+ i + "<br \/>\n"); }
</script>

relative

<style type="text/css">
	div.parent_relative {
		top:5px;
		left:50px;
		position:relative;
		background-color:silver; margin:0; padding:5px; width:430px;
	}
	div.chiled_relative {
		position:relative;
		top:10px;
		left:-30px;
		background-color:yellow; margin:0; padding:5px; width:430px;
	}
</style>

<div class="parent_relative">
	【親要素】position:relative を指定しています。
	<div class="chiled_relative">
		【子要素】position:relative を指定しています。<br>
		top、left プロパティで位置指定しているため、親要素の左上端が基準位置となります。<br>
		この例では、親要素の左上端から<br>
		　・下方向に10px（top:10px）、<br>
		　・左方向に30px（left:-30px）<br>
		ずらした位置に配置されます。<br>
		※この例のように親要素にテキスト部分がある場合は、テキスト部分の終わりが基準位置となります。
	</div>
</div>

fixed

<style type="text/css">
	div.parent {
		position:fixed;
		bottom:0; right:100px;
		background-color:silver; margin:0; padding:5px; width:430px;
	}
	div.chiled {
		position:fixed;
		top:100px; left:10px;
		background-color:yellow; margin:0; padding:5px; width:430px;
	}
</style>

<div class="parent">
	【親要素】position:fixed を指定しています。
	bottom、right プロパティで位置指定しています。
	<div class="chiled">
		【子要素】position:fixed を指定しています。<br>
		入れ子にしても親要素からの絶対位置ではありません！
		top、left プロパティで位置指定しているので、この例では常に画面左上端が基準位置となります。<br>
		※absolute と異なり、fixed を指定した場合は、スクロールしても要素は常に画面左上端に固定表示されます。
	</div>
</div>

<script type="text/javascript">
	for(var i=0; i<30; i++) { document.write("LINE "+ i + "<br \/>\n"); }
</script>