【CSS入門】positionの使い方を簡単解説【ちょっと難しい？】

この記事では要素の配置方法を指定する、CSSのpositionプロパティについて解説します。

absoluteやrelative・・・と聞くとWebデザインの勉強を始めたばかりだと難しく感じてしまいますが、これを使いこなすと自由なレイアウトができるので確実に理解しておきましょう。

positionとは？

要素の配置方法を指定します。

positionと一緒に使うプロパティ

positionで配置方法を決めたら、具体的に配置位置を指定する為にtop,right,bottom,leftやz-indexというプロパティを併用します。

単位はpx、%がよく使われ、マイナスの値を指定することもできます。ただしこれら全て、positionがstatic(デフォルト値)だと使用出来ないので注意が必要です。

positionの使い方

positionに指定できる配置方法(値)は以下の通りです。

position: static;

positionの初期値がこれです。topやleft、z-indexなどのプロパティを指定しても効かず、配置位置と重なり順を変えることはできないのでstaticを指定することは、ほとんどありません。

しかし指定したpositionを打ち消すことができる>ので、レスポンシブデザインでは重宝します。

position: relative;

本来の表示位置(static)から相対的な位置を指定します。下記の例の場合、BOX-Bは本来の表示位置の上から100px、左から200px移動するように指定しています。

relativeを指定すると移動させた要素の高さは元の場所に残るので、BOX-CはBOX-Bの元の位置の下に配置されています。

HTML

<div class="parent">
  <div class="BOX-A">BOX-A</div>
  <div class="BOX-B">BOX-B</div>
  <div class="BOX-C">BOX-C</div>
</div>

CSS

.BOX-A,.BOX-B,.BOX-C{
  width: 300px;
  height: 150px;
}

.BOX-B{
  position: relative;
  top: 100px;
  left: 200px;
}

位置を指定する以外にも、staticでは効かないz-indexを効かせるためや、absoluteの開始位置として使用する場面がかなりあります。

position: absolute;

親要素からの絶対的な位置を指定します。

absoluteを使う時は親要素にrelativeかfixedを指定する必要があり、指定をしないとウィンドウの左上が基準位置となってしまいます。

使用例①

下記の例の場合、親要素にrelativeを指定していないので、、BOX-Bはウィンドウの左上を基準に上から100px、左から200px移動するように指定しています。

absoluteを指定すると要素は高さがなくなって浮いたような状態になるので、BOX-CはBOX-Bの元の位置に詰めて配置されています。

HTML

<div class="parent">
  <div class="BOX-A">BOX-A</div>
  <div class="BOX-B">BOX-B</div>
  <div class="BOX-C">BOX-C</div>
</div>

CSS

.BOX-A,.BOX-B,.BOX-C{
  width: 300px;
  height: 150px;
}

.BOX-B{
  position: absolute;
  top: 100px;
  left: 200px;
}

使用例②

もう一つ、WEBサイトを制作していると画像の上に文字を配置したいときがよくあります。

そんなときは下記のように、画像を親要素としてrelativeを指定し、文字を子要素としてabsoluteを指定します。そして親要素の左上を基準とし、どこに子要素を配置したいかもtopなどを使い指定します。

HTML

<div class="bg">
  <p>テキスト<br>サンプルです</p>
</div>

CSS

.bg{
  position: relative;
  width: 100%;
  height: 700px;
  background: url(./images/main.jpg)no-repeat center center;
  background-size: cover;
}


p{
  position: absolute;
  top: 100px;
  left: 20px;
  color: #fff;
}

position: fixed;

ウィンドウの決まった位置に固定されるので、スクロールしても表示位置が変わりません。

位置の基準はウィンドウの表示領域全体です。

HTML

<div class="bg">
  <div class="BOX-A">BOX-A</div>
</div>

CSS

.bg{
  position: relative;
  width: 100%;
  height: 1000px;
  background: url(./images/main.jpg)no-repeat center center;
  background-size: cover;
}

.BOX-A{
  position: fixed;
  top: 0px;
  right: 0px;
}

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の3点です。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。