CSSをやっているとたまに、positionがわからなくなります。
これたぶん初心者あるあるなんじゃないかな。
せっかくだから、自分の頭の整理がてら、まとめてみます。
Positionとは
でもその前に、そもそも position とはなんなのでしょうか。
簡単に言うと要素の「配置・位置」を決めるCSSプロパティのこと。
要素を重ねるときや、要素を特定の位置に配置させる時に使用します。
Positionの種類一覧
それでは、まずpositionの種類とその簡単な説明。今まで、なんとなく、これか！いや、うまく行かない、じゃあこれか！みたいな感じで使っていた感が否めないので、ここで大体の特徴は掴みたいと思います。
static
何も指定しなければ、static というのがdefaultになっています。
このstaticというのは、位置の指定ができないもので、position=無効！みたいな感じで覚えておきます。もしpositionを変更したいのであれば、他のプロパティに変更する必要があります。
relative
要素が通常配置される位置を基準に動かすプロパティ。
relativeは、通常配置されている位置は、確保されたまま要素が動くので、次に要素があっても詰められることがありません。
absolute
親要素を基準とした中で絶対的な位置を決める。しかし、その場合、親要素は"必ずrelativeかfixed"でなければならない。
absoluteの場合、relativeと違い、通常配置されるはずだった位置は確保されずに動くので次にある要素が詰めてきます。
fixed
absoluteと似ているが、親要素ではなく、ウィンドウ自体を基準として位置を決める。
使える要素一覧
left, right, top, bottomが使用できるのは
- relative
- absolute
またここでマイナスの値を指定することで、要素からはみ出すことができる。
※基本的に、rightとleftを同時に使用する、もしくは、topとbottomを同時に使用することはありません。もし同時に使用してしまった場合は下記の優先順位が適用されますのでご注意を。
right > left
top > bottom
z-indexが使えるのは
- relative
- absolute
- fixed
まとめ
positionは、ちゃんと理解できるまでは使うのが難しいです。
またfloatやdisplayなどと重なると、さらにわけわかめになってきますよね。。
でも、とりあえずdiv要素の配置に困ったら、positionで位置を固定することを心がけてみます。
ちなみに、position覚えるためには、こんなWEBSITE（テーマ）を模作してみると良いよ。
（pinterestでオシャンなHP探してたら、見つけたやつ。）