positionについて

positionを使うことによって、よりレイアウトの表現に幅が広がる。

まずは動かしたい要素の親要素に基準を作ってあげる。

入力するプロパティと値は　position:relative;

この　position:relative;　が親要素に付い無ければどうなるかというと、動かしたい要素はそのまた親要素（要素からみて祖父母の関係）に基準を探しにいってしまう。
しかし、どこにもなければ最終的にbodyを基準と捉えてしまう。

positionを複数の要素に使うと、下図の“one”と“five”のように重なってしまうことがある。HTMLで書かれた通りの順番でデータが上書きされているからだ。

HTMLの"one"と"five"の書き順を逆にすれば、"five"の上に"one"が重なる形になる。

しかし、レイアウトのためだけにHTMLの文章構造は変えてはいけない。

CSSの　z-index:　というプロパティを使う。

値の書き方に厳密なきまりはない。値は要素のいる階層の場所を表している。

値の数が大きければ大きいほど手前に配置される。

ここでは"five"のz-indexに2をいれる。

次は"one"

"five"よりも手前に出したいから2よりも大きい値にしなくてはならない。

ここのz-indexには3を入れる。

そうすると下図のようになる。

position:index;を使うことによって文書構造に囚われない自由なレイアウトが出来るようになる。