CSSのpositionを指定する場合に忘れてはいけない基本を書いていく。
positionの種類
まずpositionの種類は次の4つ。
- satic
- relative
- absolute
- fixed
でわ、ひとつづつの特徴をみていく。
static
sataticはデフォルトの設定である。つまり初期値。なのでわざわざ指定することはほとんどない。
また上下左右に動かすことができないので、topやleftと指定しても効かない。そしてz-indexを指定できないことも重要なので初心者は必ず覚えておいたほうがよい。
relative
relativeは現在の位置を基準に相対的な位置を決める。本来の表示位置が基準になり移動させることができる。そしてz-indexを指定することができる。
absolute
absoluteは親要素を基準に絶対的な位置を決める。この「絶対的な位置」と言うのは、要素がどんな形であろうと、間に他の要素や余白が入っていても、その指定した位置に絶対に配置してくれると言う意味である。また注意しなければならないのが、absoluteを指定した場合、親要素がstaticかstatic以外かで挙動が変わる。親要素がstaticの場合は、ウィンドウの左上を起点に位置が計算され、そこに配置される。static以外の場合は、親要素の左上を起点に配置される。また後続に続く要素がある場合、後続の要素は前の要素があたかもなかったように詰めて配置される点にも注意（fixedの場合も同様）。absoluteを使うときは親要素も一緒に考える様にすることを忘れずに。
fixed
fixedは画面の決まった位置に固定することができる。つまりスクロールしても位置が変わらない。使い道としてはメニューバーやソーシャルボタンなどによく使われている。
最後に一言
css初心者が最初に躓くのが、このpositionの指定だと私は思う。しっかりとそれぞれの特徴を掴み、自分の思い通りにpositionの指定ができればコーディングも楽になる。しっかりとマスターしよう。