position （表示位置）

positionプロパティで配置方法を指定し、実際の表示位置は、top, bottom, left, rightを使って基準位置からの距離を指定します。

具体的には、メニューなど重要度が低いものをHTMLのソースでは後ろに記述したが、表示上では上部に表示したい場合などに使用したりします。

positionプロパティ

positionプロパティは「static」「absolute」「relative」「fixed」の4つがあります。

static （通常）

デフォルト値がこのstaticで、top、bottom、left、rightは適用されません。
下記の3つの指定を解除したい時にしようします。

absolute （絶対位置）

絶対位置への配置となり、親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。floatとの併用はできません。

relative （相対位置）

相対位置への配置で、staticを指定した場合に表示される位置が基準位置となり、top, bottom, left, rightが適用されます。floatとの併用も可能です。

fixed （位置固定）

絶対位置への配置でスクロールしても位置が固定されたままで表示されます。

positionの「absolute」、「relative」を使ったサンプル

.relative1 {
 position: relative;
 width: 580px;
 height: 70px;
 margin: 10px;
 padding: 10px 8px;
 background-color: #d9d9d9;
 border: 1px solid #ccc;
}
.absolute1 {
 position: absolute;
 top: 30px;
 left: 450px;
 width: 100px;
 height: 25px;
 padding:5px 3px;
 border: 1px solid #ccc;
 background-color: #ea5e00;
 color: #fff;
 font-weight: bold;
 text-align: center;
}

<div class="relative1">
	ヘッダー
	<div class="absolute1">
		<p>お問合せ</p>
	</div>
</div>

実際の表示は下記の通りです。