目指せ！positionマスター！

2021 8/06

2021年8月6日 2021年8月6日

レイアウトに便利なposition！

ようこそ！Dreamweaverの世界へ！
君がこの記事を見ているということはコーディングにもだいぶ慣れてきた頃なのではないか？今回は筆者も苦戦した「position」を出来るだけわかりやすく説明してみようと思う！
では、レッツゴーー！

positionとは

positionとは、ボックスの配置方法（基準位置）を指定するプロパティです。
指定するには・・・

なに？・・え？もう言ってる意味がわからないって？
まぁ、要するに「自分で基準を決めて、配置する方法」ってことさ！

わかりやすいだろう！(どや)

・・え？？わかんない！！？うーん・・・

君が「これはここ！」ってしたい時に使う方法だ！わかれ！次行くぞ！

表示位置の指定

配置したい数値を入力する時使うのが下の４つだ！

top
right
bottom
left

わかりやすく言うと、

上から
右から
下から
左から

っていう意味だ。

例えば
{top:10px;}
は「上から10pxの場所に配置する」っていう指示になる。
もっと下に配置したいからってbottomを選ばないように注意だ！

基準位置の指定

基準の四天王を紹介だ！

static
特に配置方法を指定せず、通常の位置に配置します（初期値）。この値の場合はtop、bottom、left、rightを併用しません。
relative
通常の位置を基準とした、相対位置への配置を指定します。
absolute
包含ブロック（直近の祖先要素でポジショニングされた要素、もしくはウインドウの内容領域）を基準とした、絶対位置への配置を指定します。
Fixed
ウインドウを基準とした絶対位置への配置を指定します。absoluteと異なり、スクロールしても同じ位置に固定します。
出典：positionとは｜コーディングのプロが作るCSS辞典
https://html-coding.co.jp/annex/dictionary/css/position/

四天王をもっとわかりやすくいうと、

static
そのまま。
いま、君が画面で見えている配置そのまま。
→四天王の中でも最弱。使わない。入力しなくて良いぜ。
relative
動かす。または基準にもなる。
さっき、君が画面で見ていた位置を基準に動かす。
→四天王最強。位置の微調整とかに便利だぜ！割と使う。absoluteがある時は基準の役割にもなるぜ！
absolute
relativeを基準に動かす。
→四天王の無口担当。基本relativeとセットで使うからrelativeいないとダメ。単独で使うことはない。
Fixed
固定する。
いま、君が画面で見ている場所で固定する。
→四天王の中で一番忠実。素直。スクロールしてもずっと同じ場所にいるぜ！