cssのpositionプロパティを使うのに必要な知識。

公開日：2020/07/06

ホームページ制作でcssは必ず使用し、レイアウトをデザイン通りに組み立てるためには必要なものになります。

その中でもfloatやflexboxでコンテンツを並べたりすることが多いですが、その他にもpositionを使ってコンテンツを表示したりします。

ですが、このpositionをしっかり理解していなければ、デザインが崩れたりブラウザやデバイスによって思っているようなデザインにならなかったりします。

そんなpositionプロパティをご紹介します。

要素（コンテンツ等）を指定した数値の場所に表示することができるプロパティです。

floatやflexboxと違って親要素を基準にどの位置に設置するとか、サイト全体を基準にしたり、ディスプレイに表示されている画面を基準にしたりできます。

サイトは平面で構成されていますが、positionで要素を設置する際は、サイトの上のもう一枚平面を置くというイメージを持つと扱いやすくなります。

positionを使ったことがない方は、最初はこのイメージがわからないと思います。ですが、使っていく中でこのイメージが一番分かりやすいと思ってもらえるはずです。

cssでの書き方は以下のように記述します。

.box {
    position: ○○○;
}

.box {

position: ○○○;

}

「○○○」の部分にpositionの値を入れて記述しますが、この値によってpositionで表現できることが異なってきます。

static	初期値。top/bottom/left/rightが適応されません。
relative	相対位置への配置。現在の位置を基準にして配置できる。
absolute	絶対位置への配置。親要素にposition:static;以外の値が指定されている場合は親要素を基準とします。何も指定されていない場合は、画面全体が基準になります（開始位置は左上から）
fixed	絶対位置への配置ですが、スクロールしてもその位置に固定されたままになる。

positionは先程も説明したように「サイトの上のもう一枚平面を置く」ということになります。

ここでpositionを多用した場合どうなるのでしょうか？

答えは、サイト上に何枚も重なるようにpositionで指定したコンテンツができるということです。

ですから、サイトを輪切りにしてみると通常のサイトの上にpositionで指定したコンテンツが重なっている状態です。

ですが、どの順番で重なっているのかということになります。そこで使うのが「z-index」になります。

z-index: 2;と指定するとサイトの上にできた階層の順番を指定することができます。コンテンツを重ねることによりデザインを構築することができます。

例えば、画像の上にテキストを重ねたいという場合は、テキストにz-indexを指定（画像より大きい値で）してあげることで画像より上の階層に位置するため画像がテキストの下にうつるようになります。

重なる順番を指定してあげるということを覚えておくだけでデザインの幅は大きくなります。

これは、positionの値で決めた基準の位置からどのくらいの位置に配置するかという指定方法です。

top	基準位置の上からいくつの位置に配置するのかを決める
bottom	基準位置の下からいくつの位置に配置するのかを決める
left	基準位置の左からいくつの位置に配置するのかを決める
right	基準位置の右からいくつの位置に配置するのかを決める

.box {
  position: absolute;
  top: 15px;
  left: 20px;
}

.box {

position: absolute;

top: 15px;

left: 20px;

}

上記の記述では、基準位置の上から15pxで左から20pxの位置に配置するということになります。

positionは慣れてしまえば簡単にサイトを構築することができます。

ですが、今ではデバイスが多様化されており、それによって思っていない場所に表示されることもあります。いろいろなデバイスがある中で1つずつ検証するのも無理な状態になります。

ですから、floatやflexboxで構成できる部分はしっかりとfloatやflexboxで構築していくようにしましょう。

自ずとpositionが必要な状況が分かってくると思います。positionを多用したサイトは見ずらくなったり、デザインが崩れていたり、テキストをドラッグできなかったりといろいろなデメリットも存在します。

ユーザー視点からも無駄な多用はせずに、必要な箇所だけにpositionプロパティを使うようにしましょう。

制作側からも後々の修正やコンテンツ追加でpositionを多用していると思っている以上に作業時間がかかることがありますので注意しましょう。