「position」の使い方

position top left bottom right z-index
記述例意味
position:static;staticこの値のときには、top、bottom、left、rightは適用されません。初期値
position:relative;relative相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
position:absolute;absolute絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
position:fixed;fixed絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
top:0;
left:5px;
bottom:5%;
right:auto;
「auto」
「auto」初期値
「px,%,me」などの数値で指定
positionプロパティを併用して、配置方法(基準位置)を設定
z-index:999;整数値で指定(数値が多きほど上)
「auto」初期値
z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。

position:relative;
相対位置への配置

position:absolute;
絶対位置への配置

position:fixed;
固定位置への配置

position:relative;の中に
position:absolute;
相対位置の中で
絶対位置への配置

「position」を使うと幅「width」は初期値が無くなるが、
幅「width」と高さ「height」で%指定が使えるようになる