static
static
width: 200px
height: 100px
static
static
「static」は、普段の状態。
<div> が順番に重なる。
z-index も効かない。
relative
static
width: 200px
height: 100px
relative
top: 50px
left: 100px
static
「relative」は、元の位置を基準に移動する。
元の空間はそのまま残る。
absolute（relative あり）
static
width: 200px
height: 100px
absolute
top: 50px
left: 100px
static
「absolute」は、親かその先祖の要素「relative」を基準に移動する。
元の空間は無くなって移動する。
absolute（relativeなし・位置指定あり）
static
width: 200px
height: 100px
absolute
top: 0px
left: 0px
static
「relative」を指定しない場合、ブラウザの左上が基準になるので、左上に要素が飛んでいく。
absolute（relativeなし・位置指定なし）
static
width: 200px
height: 100px
absolute
top: なし
left: なし
static
「relative」の指定がなく「top」「left」などの位置指定もない場合、元の位置に表示される。
が、元の空間はなくなり次の要素と重なる。