46.positionプロパティについて ～要素を望んだ場所に配置する～
昨日やりたかったpositionプロパティについて
試しながら整理してみました。
では、さっそくやっていきましょう。
positionプロパティとは
一言でいえば、「要素を望んだ場所に配置する」プロパティです。
通常の配置では、
- 要素同士を重ねる
- 並び順を無視して配置する
- 常に同じ場所に表示し続ける
みたいなことはできません。
ブロック要素とインライン要素の性質に従って、
つらつらと上から下へ要素が配置されていくだけです。
もっと自由に要素を配置するための手段の１つとして「position」があります。
どんな設定ができるの？
まず、positionプロパティの基本について確認していきます。
指定した要素を思った位置へ配置したいわけですが、
その為に移動の基準とその量を指定します。
設定できる基準はtop、bottom、right、leftの４種があり、
おおむね４つのうち移動方向が異なる２つを指定します。
また移動基準と量は下記のように指定します。
.test{
position : fixed;
top :100px;
left : 100px;
}
このような具合ですね。
「指定した配置タイプの起点から、要素で指定した基準をどれだけ移動させるか」
を指定してあげるわけです。
デフォルト値とよく使う値
それでは、デフォルト値とよく使う値について見ていきましょう。
position : static;
これはデフォルト値。top, right, bottom, left, z-indexを指定しても何も起こりません。
positionが設定済みのものを、後からリセットする場合には使えそうです。
position : relative;
これはposition指定した要素の「本来配置される位置」を起点とする配置タイプです。
左側がポジション指定前で、右側がtop:20px;、left:20pxを指定した状態です。
そして、他の要素は要素が移動する前の赤い点線部分との関係を保ち続けます。
次にブロック要素を挿入した場合に、要素のbottomの下ではなくて、
赤い点線の下側と接するように配置されるのです。
position : absolute;
これは
- position指定した要素のpositionが指定されている親要素にを起点とする
- 親要素がposition指定されていない場合、初期のページ領域※を起点とする
※スクロールバーが縦、横ともに初期状態のときのブラウザのページ領域基準です。
ブラウザサイズが変われば位置が変わります。bottomで試すとわかりやすいです。
親のposition指定によって起点が変わる配置タイプです。
実際は、親要素にposition:relative;の移動量0を指定して使うことが多いです。
親要素を起点とするのが特徴で、親要素が移動するような場合でも親要素との位置関係を守るので一緒に移動するというわけです。
position : fixed;
これは
ページを起点とする配置タイプです。
どんなに動かそうが表示領域に対して、指定した位置を保ち続けるので
ナビゲーションの上固定や、フッターの下固定につかったりします。
下図のようにスクロールしても要素の位置はページに対してずっと固定で追従しているように見えます。
試したことなど
top,bottom,left,rightの４つすべてを指定することも試してみましたが、指定要素にwidthやheightの指定がある場合は基本的にY方向はtopが、X方向はleftが優先されるようです。
position指定要素にwidth、height指定がない場合は、positionの指定に従うようにボックス自体の大きさが変わったりなど意図しない動きになります。
これでは思い通りの配置と意図がずれてしまうので、
「widthやheightを指定しない」状態を意図的に選択する場面以外は
基本的にwidth、heightは指定すべきかなと思います。
今日のまとめ
- positionプロパティでレイアウトの幅が広がる
- absoluteは親要素にposition:relativeをつけて使うべし
- width、heightは指定しすべし
positionプロパティもfloatプロパティもそうですが、
意図せぬレイアウト崩れを防ぐためにもwidthやheightは指定すべきですね。
では、また。
