記事の監修者
みなさん、CSSプロパティの「position」を使ったことはありますか？
positionを使いこなせると要素を自由自在に配置することができるようになり、デザインの表現の幅がグッと広がります。
と言っても苦手意識を持っている人も多いと思います。
そんな方のために、positionをわかりやすく解説していきます。
positionとは
positionは以下のように説明されることが多いです。
・position: relative; が相対的な位置
・position: absolute;が絶対的な位置
ですがこちらに関しては無理に覚えなくても大丈夫です！
覚え方として
・position:relative;は出発地点
・position: absolute;は出発地点からの距離
・基本的にこの2つはセットで使うもの
と覚えてください！
positionの使い方
出発地点のposition: relative;は親要素に、position: absolute;はその子要素あるいは孫要素に指定して使います。
ソースコード
HTMLでは、出発地点となる親要素と到着地点である子要素を用意します。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
CSSでは、親要素に「position: relative;」を指定します。子要素には「position: absolute;」を指定し、出発地点からの距離を「top」「left」「right」「bottom」から指定します。
※1 ここでは、親要素の「top: 0;」となる一番上からの距離を「top: 50px;」で指定しています。
※2 同様に親要素の「left: 0;」となるいちばん左からの距離を「left: 70px;」として指定しています。
positionプロパティは他にも以下のものがあります。
・static・・・デフォルトの値
・fixed・・・要素を画面上に固定する
・sticky・・・スクロール時に要素を固定したいときに使う
