CSSの中でも必ず知っておかなくてはいけないプロパティの1つである『position』を知っていますか。
今回はプロパティ『position』について最低限理解しなければいけないことを初心者の方にも分かりやすく解説していきます。
CSSの書き方について不安のある方はCSSの使い方、書き方を初心者でも分かりやすく簡単解説で詳しく解説していますので、参考にしてみてください。
それでは『position』について解説していきます。
Contents
・positionとは
まず、プロパティ『position』とは要素の基準位置を指定することが出来るプロパティになります。
これを指定することによって、要素の位置を任意の位置に移動させたり、固定させたりすることが出来るようになります。
また、疑似クラス『hover』と組み合わせることで、飛躍的にデザイン性が向上している要素を作ることが出来るようになります。
疑似クラス『hover』と組み合わせるデザイン例について、下記の記事で一例としてですが、解説していますので、参考にしてみてください。
注意：要素の位置はプロパティ『top』、『bottom』、『left』、『right』で指定する
『position』はその基準位置を指定するプロパティであり、要素の位置を移動させるにはプロパティ『top』、『bottom』、『left』、『right』で指定します。
『position』の具体的な使い方についてはこの後詳しく解説しますが、『position』だけでは要素の位置を変えることは出来ません。
イメージとしては『position』で基準位置を決めて、そこからどれくらいの間隔があるのかは『top』、『bottom』、『left』、『right』で指定します。
それでは、ここからプロパティ『position』の具体的な使い方について、『position』の値を紹介しながら解説していきます。
・sticky
.sample {
position: sticky;
}『sticky』は要素をデフォルトの位置に指定するための値になります。
そのため、『position』を指定していない場合には『sticky』が指定されていることになり、『position』を指定していないため、『top』や『bottom』、『left』、『right』を使って要素を動かすことは出来ません。
要素を動かすためにはこれから解説する、『relative』や『absolute』を使う必要があります。
それでは『relative』や『absolute』について詳しく解説していきます。
・relative
.sample {
position: relative;
}『relative』はデフォルトの位置を基準として相対的に位置を指定するための値になります。
先ほど解説した『sticky』はデフォルトの位置がその要素の位置として指定されますが、『relative』はそのデフォルトの位置から要素を移動されることが出来ます。
『relative』はデフォルトの位置を基準として相対的に位置を指定するため、基準位置を決めてから『top』や『bottom』、『left』、『right』を使って要素を動かしていきます。
そのため、『relative』を指定しただけで要素が移動するという訳ではありません。
『relative』は相対的な位置を決める値ですが、次は絶対的な位置を決める『absolute』について解説していきます。
・absolute
.sample {
position: absolute;
}『absolute』は親要素を基準として絶対的な位置を指定するための値になります。
先ほど解説した『relative』はそのデフォルトの位置から要素を相対的に決める値ですが、『absolute』は親要素を基準として絶対的に決めて動かせる値です。
絶対的な位置とは、もし、指定したい部分に別の要素があった時にも要素が重なることで、指定した部分に要素を配置することが出来ることを意味します。
また、『relative』と同様に基準位置を決めてからは『top』や『bottom』、『left』、『right』を使って要素を動かしていきます。
注意：『absolute』を使う場合には親要素に『relative』を指定する
『absolute』を使う場合には親要素に『relative』を指定することを忘れないようにしましょう。
親要素に『relative』を指定しないと、基準位置がズレることがあり、デザインが崩れる恐れがあります。
そのため、『absolute』を使う場合には親要素に『relative』を指定することを癖づけ、デザインが崩れることがないように注意しましょう。
・fixed
.sample {
position: fixed;
}『fixed』はユーザーが使用する端末の画面を基準として、要素を任意の位置に固定するための値になります。
分かりやすい例でいうと、ページ上部や下部にメニューバーが固定され、スクロールしてもその位置が変わらないようなデザインが挙げられます。
この『fixed』も先ほど解説した『absolute』と同じように絶対的な位置を指定することが出来る値ですが、『absolute』は親要素を基準にしているのに対し、『fixed』はユーザーが使用する端末の画面が基準になります。
そして、『relative』や『absolute』と同様に基準位置を決めてからは『top』や『bottom』、『left』、『right』を使って要素を動かしていきます。
今回はCSSのプロパティである『position』について、最低限抑えておいた方が良い知識について簡単に解説しました。
『position』を使わないと、要素が単調に並ぶだけのサイトになってしまい、見栄えが悪くなってしまいます。
この記事で基本的な知識を理解し、『position』を使いこなしていきましょう。
