CSSポジション

ポジションの注意点

positionプロパティはレスポンシブで非常に不利になる場合が多いため、あまり多様しないよう注意してください。
ただし、使い方によっては効果的に使えるので特定要素に限定した使用方法が一般的となります。

ポジションテクニック

ポジションを利用した段組

positionプロパティを利用して段組を作る方法です。

親要素に指定：position:relative;（子要素の基点にする）
子要素に指定：position:absolute;（親要素を基点に子要素を表示する）
子要素の表示位置を指定：top、left、bottom、right:値;

ボックスの重なり順序を指定する方法

positionプロパティで複数のボックスを利用すると配置によっては重なる場合があります。
そんな時はz-indexプロパティを利用すれば、重なる順序を指定する事ができます。

各ボックスに指定：z-index:値;
値（重なる順序）：auto（親要素と同じ階層）、0～（値が大きいほど上に表示）

ヘッダに複数画像を表示する方法

ヘッダ部分に複数の画像を表示する方法です。
やり方はpositionを使ってヘッダを基点に各画像を配置し、z-indexで重なり順序を指定するだけです。
ただし、この方法は画像の総数が増えて表示に時間がかかるため、特別な理由がない限りは一枚の画像に加工した方が効果的です。

基点となる要素（containerやheaderなど） {position:relative;}
1枚目の画像の要素 {position:absolute;top、left、bottom、right:値;z-index:値;}
2枚目の画像の要素 {position:absolute;top、left、bottom、right:値;z-index:値;}