positionプロパティについて
本日の教材動画はこちら
本日もボックスの配置に関係するpositionについてみていきます。今回も動画を見てもいまいち理解に苦しんでしまったので自分で調べたながら書いてます。もし理解などが間違ってたら是非ご指摘ください...。
position プロパティについて
主に要素の位置を決める基準を指定するためのプロパティ。文字だけでは分かりづらいので後ほどの記述画像で確認したほうが早いかも。使える値は
- static → 配置方法を決めない。初期値。
- abusolute → 絶対位置への配置する（※1）
- relative → 相対位置へ配置する（※2）
- fixed → 絶対位置へ配置し、スクロールしても固定される。
※1 親ボックスにstatic以外の値が指定されている場合、親ボックスの左上が基準位置となる。親ボックスにstatic以外の値が指定されていない場合はウィンドウの左上が基準位置となる。
※2 staticで表示される位置が基準位置となる。
配置する位置を決めるオプション
positionで配置位置の基準を決めるだけでなく、配置場所を決めるオプションを付与することができます。指定できる値は見慣れた下記の4つ。
- top → 上からの配置位置（距離）を指定する
- bottom → 下からの配置位置（距離）を指定する
- right → 右からの配置位置（距離）を指定する
- left → 左からの配置位置（距離）を指定する
さて、今回も動画を見てもよくわからない部分があったので実践しながら確認していくことにします。今回用意したコードとCSS内容はこちら。
divの幅を400pxに指定。各クラスの縦横は100pxに指定し、それぞれ分かりやすく色とボックス内に指定する値を記載しています。
出来上がりページはこんな感じ。div幅が400pxありますが背景色付け忘れたのでわかりづらいですね…。ひとまずこれでいきます。
absoluteを指定してみる
では真中のmiddleにposition：absoluteをしてみましょう。どのように表示されるかというと…
何故かbottomがmiddleの裏へ隠れてしまいましたね。動画の説明聞いてもあんまりわからなかったのですが、絶対位置にしたことによりmiddleが浮いて、浮いた分できあがった隙間にbottomが回り込んでしまった…っていうイメージ図のような感じで理解していいのかしら？
位置指定をしてみる
ではここに、middleの位置を top 10px で指定してみます。するとどう表示されるか…
今度はtopが隠れてしまいましたね。これもmiddleの位置を上から10pxに固定したため、その下にあるtopが隠れてしまった…というイメージ図の理解で合ってるのかな？誰か間違ってたらまじで教えて…。
leftの位置指定も追加するとこうなります。上から10px、左から10pxの位置にmiddleが配置されましたね。同様に右から10px、下から10pxの指定をすると右下に配置されるようになります。0を指定した場合はそこにぴったりくっつきます。
fixedを指定してみる
次にfixedを見てみましょう。内容としてはabdoluteと同じですが、こちらはスクロールしても位置が変わりません。固定化されます。
こんな感じですね。先ほどと同じ上10左10のところに配置しました。ここに大量のコンテンツを追加してページスクロールが必要になったとしても、上記のように位置はずっと上10左10から変わりません。middleは絶対位置として固定されているので、残りのコンテンツはその裏側にまわることになります。
親要素をrelativにした場合のabusoluteの動き
次に親要素のpositionをrelativ、その中の要素にabusoluteを指定してみます。
するとこのように表示されました。abusoluteは「親ボックスにstatic以外の値が指定されている場合、親ボックスの左上が基準位置となる」性質があります。今回static以外、つまりrelativeを指定しているので、親ボックスの左上が配置基準となり、そこから上10px、左10px下がったところにmiddleが配置されました。
前回はウィンドウ左上が基準でしたが、これもabusoluteの「親ボックスにstatic以外の値が指定されていない場合はウィンドウの左上が基準位置」となる性質のおかげということですね。
子要素もrelativeにした場合の動き
ではabusoluteではなく子要素もrelativeにした場合はどうなるか。
このように表示されました。「絶対位置」の指定ではなくなったため、従来表示される位置から上10px左10pxずれた位置に表示されましたね。
ただ唯一分からなかったのは、relativeだけでなくabusoluteを指定してもmiddleが裏側にまわってしまったこと。こちらは検索しても理由がよくわからず…。CSSの「あとに書いたものが優先」されるという基本のせいかなーという考えに至りましたが…親要素のpositionによってその辺もいろいろ変わるのかしら。難しいですね！
positionプロパティはかなり便利でいろんな場所で使われているのでマスターしたい感じですが、動きが複雑怪奇で使いこなすまでなかなか難しそうですね…。実践の際はトライ＆エラーで習得を目指そうかと思います。
【参考サイト】
position …… ボックスの配置方法（基準位置）を指定する
