[CSS]「なんとなく」から「確実」に ~position編
コードを書いていて「これをこうしたい」と人様のコードをなぞって思い通りにうまくいってしまうと「なぜこれはこういう動きになるのだろう？」と考察することを忘れてしまいがちです（私もやらかします）。今回書くことになるCSSのプロパティであるpositionはdisplayと共にレイアウトでは重要なものなので、この際完璧にしておきましょう。
positionに指定できる値は？
以下が指定できる値です。
| static | デフォルト。通常の位置に配置 |
| relative | 通常の位置を基準として、相対位置への配置 |
| absolute | static以外の値が指定された親要素を基準とした絶対位置 |
| fixed | ウインドウを基準とした絶対位置 |
親要素がstaticの場合にabsoluteを指定するとfixedと同じ動きになりますので、「absoluteを使って位置を決めるなら親要素にrelativeを指定する」を確実に覚えておきましょう。
一緒に使うプロパティも覚えておきましょう
positionと一緒に使うプロパティが以下です。
| top: ○○px; | 基準点の上から○○px下に移動（%でもOK、マイナス値も可能） |
| right:○○px; | 基準点の右から○○px左に移動 |
| bottom:○○px; | 基準点の下から○○px上に移動 |
| left:○○px; | 基準点の左から○○px右に移動 |
| z-index: ◇; | 要素の重なり順。数字が大きいほど上に表示、マイナス値も可能 |
基準点は親要素あるいは画面の左上端を指します。
ちなみに、position: staticのときにはtop・bottom・left・rightは適用されません。
次は実際に動かしてみます。
position:relative;の場合
まず基本サンプルを見てみます。
See the Pen rerative_default by necomacustom (@tamayura) on CodePen.27739
基本サンプルから緑の四角形を右斜め下に動かしてみます。
See the Pen relative_topleft by necomacustom (@tamayura) on CodePen.27739
子要素の.sample_relativeクラスにtop: 50px;とleft: 50px;を追加しました。例えばこんなことも可能です。
See the Pen relative_rightbtm by necomacustom (@tamayura) on CodePen.27739
基準となる位置、この場合はデフォルトの位置の右から左に25px、下から上へ25px移動しました。何度も使う局面はありませんが、要素を突き抜けることがpositionなら簡単にできます。position:absolute;の場合
ここが今回一番のポイントです。
親要素がrelative+子要素がabsoluteでセットが鉄板
ここだけ覚えて帰ってくださいというところですね(笑)。
親要素にposition: relative;、子要素にposition: absolute;とtop: 50px;とleft: 50px;を追加します。
See the Pen absolute_default by necomacustom (@tamayura) on CodePen.27739
次は緑の四角形を黒い背景の右下から左上へ動かしてみます。See the Pen absolute_rightbtm by necomacustom (@tamayura) on CodePen.27739
right: 25px;とbottom: 50px;を追加しました。relativeの時と同じように突き抜けることも可能です。
See the Pen absolute_rightbtm2 by necomacustom (@tamayura) on CodePen.27739
floatでも見た目は同じようにできますが、最近ではflexboxの普及でfloat自体使わなくなってきています。position: fixed;も基準点がウィンドウなだけで、absoluteと使い方は同じです。
シンプルイズベスト！というくらい、動きに絞って書いてみました。多く使うのは親要素がrelative+子要素がabsoluteのセットです。
年初に風邪をひいたり、バタバタしていたりとスタートにつまづいてしまいましたが、何とか今年一発目を書くことができました。
遅くなりましたが、本年はさらに多く書くつもりでいます。どうぞよろしくお願い致します。