■position
・要素の配置を指定するプロパティで、初期値はstatic
■種類-----------------------------------
【1】static（初期値）…positionプロパティを解除するのに利用
位置指定不可・重なり順指定不可・要素の高さ保持
【2】absolute
親要素を基準に、絶対配置を指定
【3】relative
現在位置を基準に、相対位置を指定
単体で使用せず、position: absolute; とセットで使うことが多い
【4】fixed
要素は浮いたような状態になり画面を基準に要素位置を固定
【5】sticky
親要素を用意して、追従する範囲を指定
（スクロールした際に要素を粘着させ、固定表示）
-----------------------------------
■z-indexプロパティ
数字が大きいほど前、小さいほど後ろに配置
【2】position: absolute;
要素の絶対配置を指定
親要素にposition: relative;子要素にposition: absolute; をセットで適用すると、その子要素は、浮いたような状態になる
親要素にposition: relative;に適用しないと画面左上が起点になる
【3】position:relative;
相対位置を基準に位置を指定
この場合の相対位置とは、本来その要素が表示される位置を基準とした位置
①要素の高さを維持したまま配置される。ゆえに下にある要素が詰まることはない
③position: absolute; とセットで使うことが多い
②z-indexを使用して要素の重なり順を指定
■基準位置
absolute単体 
親要素にposition: relative; を適用
top: 基準の上からの距離 親要素基準の上からの距離
bottom: 基準の下からの距離 親要素基準の下からの距離
left: 基準の左からの距離 親要素基準の左からの距離
right: 基準の右からの距離親 親要素基準の右からの距離
■position のrelativeとabsoluteが効かない原因でよくあるケース
①親要素にposition: relative; を適用していない
②top, left, bottom, rightなど位置の指定を間違えている
③親要素にoverflow: hidden; を適用している
親要素にposition: relative; とoverflow: hidden; をいっしょに適用している場合、その子要素が親要素の範囲外に配置されていると、overflow: hidden;によって子要素が非表示になる
④z-indexが負けている
⑤要素に高さやpaddingを指定していない
relativeを適用した要素にheightやpaddingを適用していない状態で、配置したい要素にabsoluteを適用すると、親要素は高さがなくなります。
これは、親要素の高さが子要素の高さに依存していて、absoluteを適用することで子要素が親要素から独立してしまうためです。