positionの使い方

2018.07.16

CSSを勉強して、最初につまずくのが「position」の扱い方ではないでしょうか?私はそうでした。 「position」についての説明は大体以下のようになります。
static → 初期値
relative → 相対位置への配置・高さを持つ
absolute; → 絶対位置への配置・高さを持たない
fixed → 固定される
「position」についての詳細な説明は position | MDN web docs にありますのでご参考までに。
私は「position」の説明をいろいろ読んだり図で示されたりしても、やはりrelativeとabsoluteの相対位置・絶対位置がよくわかりませんでした。 そこで、実務の中で教えてもらった以下の説明でしっくりきました。 「relativeがかかっている親要素を基準にしている」
positionが指定されていない要素は最初staticですが、position:absolute;をかけた子要素の基準は、position:relative; がかかった親要素であるということです。 つまり、positionを使うときには、★親要素にposition : relative ; をつけることが必須になります。 また、必ずtop(bottom)/left(right)を指定することも忘れないようにしましょう。