positionは、ボックスの配置方法を指定する時に使われるプロパティです。
また、positionプロパティでは、配置方法の基準位置を決めるだけなので、表示位置の指定は、top、right、bottom、leftを使います。
positionプロパティの値
| static | 初期値。top、right、bottom、leftは適用できません。 |
| relative | 相対的な位置に配置 |
| absolute | 絶対位置に配置。 親ボックスに、position:relative;などが指定されている場合、その親ボックスの左上を基準位置とする。 また、親ボックスに指定がない場合は、ウィンドウ全体の左上を基準位置とする。 |
| fixed | 絶対位置に配置。 スクロールをしても、要素が固定される |
文章だけではわかりづらいと思うので、以下のデモをご覧ください。
See the Pen abZNdzo by ryu (@ryu-no-sss) on CodePen.
※3つ目のfixedの『⭐️』は、デモの左上に固定されています。
それでは、それぞれの使用例を解説していきます。
positionの使い方
static
positionプロパティのstaticは、初期値であるため、
positionプロパティが指定されていない要素には、自動的に指定されています。
使用方法
staticの使用場面は、レスポンシブ対応で、PCからモバイル版にレイアウトを変更するときに、
absoluteを指定していた要素を、staticを使って初期値に戻すときなどに使用されます。
relative
relativeは、相対的な位置を指定するため、以下の画像のように、もともと配置されている要素の場所を基準に表示位置を変更することができます。
absolute
上記デモでは、親ボックスの『.box』に対して、『relative』を指定しているため、
子要素の『⭐️』は、『.box』を基準にして配置されている。
また、親要素に 『position: relative;』などの指定がない場合は、ウィンドウを基準にして配置される。
fixed
fixedは、ウィンドウがスクロールされた時も、要素が固定され続けます。
先ほどのデモを見ると、スクロールしても『⭐️』が左上に固定されているのがわかります。
See the Pen abZNdzo by ryu (@ryu-no-sss) on CodePen.
まとめ
・positionは、配置方法の基準を決め、『top、right、bottom、left』で表示位置を決める。
それでは、最後まで読んでいただきありがとうございました。
