参考：
http://www.htmq.com/style/position.shtml
http://www.css-lecture.com/log/css/037.html
static（初期値）
配置方法の指定なし。top、bottom、left、rightは適用されない。
relative
相対位置への配置。positionプロパティでstaticを指定した場合に表示される位置が基準位置。
absolute
絶対位置への配置。
親ボックスがstatic以外：親ボックスの左上が基準位置。
親ボックスがstatic：ウィンドウ全体の左上が基準位置。
fixed
絶対位置への配置。スクロールしても位置が固定。
１．親ボックスを基準に配置する場合（relative + absolute）
<!-- relativeを使用 -->
<div style="
position: relative;
width: 640px;
height: 240px;
background-color: cyan;
">
<!-- relativeと組み合わせてabsoluteを使用 -->
<div style="
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: magenta;
"></div>
</div>
サンプル
シアン色のボックスを基準にマゼンタのボックスを配置している。
２．ウィンドウを基準に配置する場合（absolute単独）
<!-- relativeを使わない -->
<div style="
width: 640px;
height: 240px;
background-color: cyan;
">
<!-- absoluteのみを使用 -->
<div style="
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: magenta;
"></div>
</div>
サンプル
ウィンドウを基準にマゼンタのボックスを配置している。
以上
