★2019.4追記 この記事の内容をベースに同人誌を書きました『cssのposition:absolute;が怖くなくなる魔法の本』
「positionは失敗するとバグるので使わないようにしています」
あるとき、cssがそこそこかける人に、そんな悲しいことを言われました。
cssがそこそこ使えるようになったときに、できるようでできないのがpositon！
positionは使い方を身につけるまでは、安易に使うとすぐにおかしなことになるのです。
が、positionのことを理解すれば超便利！positionとお友達になろう！
positionが怖くなくなるまで徹底的に意味をおさらい！
positionとは
positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する際に使用します。
positionプロパティで指定するのは、配置方法（基準位置）のみです。 実際の表示位置の指定には、top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。
position－スタイルシートリファレンス http://www.htmq.com/style/position.shtml
……そうですね、これは難しい……positionとお友達になればこの説明の意味も分かるようになるでしょう……！
簡単に言ってしまうと
『何かの要素の上にとある要素を重ねたり、画面の上部や下部についてくるメニューやボタンをcssで配置するときに活躍するのがposition』
です。
上記の難しい説明にでてきた「基準位置」とか「相対位置」「絶対位置」とか呼ばれているもの。
これらがどんなものかを理解することが、position使いこなしのとっても大切なポイントです。
positionで基準位置を決める
まずはpositionで置きたいものの基準になる位置がどこかを考えます。
何の気なしにposition:absoluteしたとき
とりあえず配置したいものにposition:absolute;を設定すると、基準位置は
- ページの一番上＝top:0;
- ページの一番下＝bottom:0;
- ページの左端＝left:0;
- ページの右端＝right:0;
こんな感じになります。
ただし下記のように親・祖先要素にposition:static;以外が設定されているときを除きます。
position:absolute;の要素の親・祖先要素がposition:static以外になっているとき
position:absolute;の要素の親・祖先要素にposition:relativeなどstatic以外が設定されているとき、基準位置は
position:static以外が設定されている要素の
- 上端＝top:0;
- 下端＝bottom:0;
- 左端＝left:0:
- 右端＝right:0;
このようになります。
特別な理由がない限りは、基準位置にしたい親・祖先要素にposition:relativeを使うとよいでしょう。
何の気なしにposition:fixedしたとき
とりあえず配置したいものにposition:fixedを設定すると、基準位置は
ウィンドウ（描画領域）の
- 上端＝top:0;
- 下端＝bottom:0;
- 左端＝left:0:
- 右端＝right:0;
になります。
画面をスクロールしてもずっとついてくる、追従バナー・追従ナビにはposition:fixedを使います。
position:relativeした要素にtop:0とかをつけるとき
position:relativeにtop:0などの位置指定をつけるのはお勧めしませんが、このとき基準位置は
position:staticだった時のその要素の
- 上端＝top:0;
- 下端＝bottom:0;
- 左端＝left:0:
- 右端＝right:0;
になります。
作るときはともかく、あとからメンテナンスする際にわけが分からなくなりやすいので、position:relativeした要素にtop:0;などの位置指定はできるだけ使わないようにしましょう。
こうやって使えば全然怖くないposition
怖くないpositionの使い方は下記の2つ。
基本的には下記の2つの使い方をしましょう。
これと決めた基準位置にposition:relative;、配置したいものにposition:absolute;で配置する
まず何の上に（何の中に）要素を乗せたいのか、基準位置にする要素を決めます。
配置したい要素は、基準位置にする要素の子孫要素にします。
そして、下記の要領で設定すれば思った通りの位置に移動すること間違いなし
- 基準位置にする要素にposition:relative;を設定
- 配置したい要素にposition:absolute;を設定
- 基準位置にする要素から見て上下左右どこに位置させるかをtop,left,right,bottomで設定
画面に追従する要素には臆することなくposition:fixed;
ページをスクロールしても、画面の同じ位置に常に表示される要素にはposition:fixed;を何も考えずに指定しましょう。
headerなどの画面幅いっぱいに広がる要素にはleft:0;とright:0;を両方使うことを超お勧めします。
positionあるあるを徹底的に解決！
position:absoluteにした瞬間に要素が消滅したんですが？
画面の一番上とか一番下とかにスクロールして探してみましょう。たいていそのあたりにいます。
ポイント：基準位置を決めるためのposition:relativeを忘れていませんか？
position:absoluteにした瞬間に、基準位置として使っている要素の高さがなくなりましたが？
position:absoluteの要素は、その高さを囲んでいる要素に伝えることができなくなります。
ポイント：基準位置の要素に①heightを指定する、②paddingを指定する、③position:staticまたはposition:relativeの要素を配置できませんか？
position:relativeの要素にtop,bottom,left,rightを指定したのですが、どういうルールで動いているんでしょうか？
cssのルール上はposition:relativeにもtop,bottom,left,rightを指定して位置を移動することができます。
ただしその場合、その要素がposition:staticだった時の位置からみて上下左右にどれだけ動かすかになるので、基準の位置が分かりにくいです。
ポイント：top,bottom,left,rightを使うのはposition:absoluteまたはfixedのときだけにしましょう。
position:absoluteにした要素を動かすためにtop,bottom,left,rightを使わず、marginを使ったのですが大丈夫でしょうか？
基本的にはtop、bottom、left、rightを使って位置を設定しましょう。
もちろん、必要に応じてmarginと組み合わせるのは問題ありません。
中央寄せのテクニックなどでmarginを使うことはあります。
ポイント：基準位置の上下左右から数えてどれくらいの位置に置きたいかをtop,bottom,left,rightで表現できないか、確認してみましょう。
レスポンシブでもposition:absoluteでの配置はちゃんと使えるんでしょうか？
どのようなデザインを実現するかによって難易度は変わりますが可能です。
決め手は%。
ポイント：基準位置の要素の大きさも、配置する要素の大きさも、そして位置の指定もすべて%で計算して配置してみましょう。
2020.8 レスポンシブ対応の詳しいやり方を書きました！⇒ 【CSS】position:absoluteをレスポンシブ対応で使うコツはパーセント計算にあり！
position:absolute;の子孫要素にposition:absolute;を使うとどうなりますか？
たとえばposition:relativeが祖先にいて、親にposition:absoluteがいる、position:absoluteの要素の位置を考えてみましょう。
このとき基準位置になるのは親のposition:absoluteの要素です。
position:absolute;の基準位置は一番近くのposition:staticではない親・祖先要素。
ポイント：近い祖先にposition:staticではない要素があれば、遠い祖先にposition:relativeがいても、そこは基準位置にならないので覚えておきましょう。
※追記※ この記事をベースに同人誌を書きました
cssのposition:absolute;が怖くなくなる魔法の本
https://kyokoh.booth.pm/items/1308198
コメント