【初学者向け】positionの絶対値と相対値の考え方。

cssのpositionって要素を自由な位置に配置できるので非常に便利ですよね。
改めて調べてみると絶対値やら相対値やらと非常に分かりずらい・・・なので自分なりに分かりやすく解説していきたいと思います。

準備

以下の画像を使います。

ベースのコードは以下になります。

html

<div class="parent">
  <img src="./img/seal.png" class="seal">
  <img src="./img/bee.png" class="bee">
</div>

css

.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
}

positionを使ってみる

早速position使っていきますが、その前にpositionの概念を知っておきましょう。
positionとは、要素を自由な位置に配置できるプロパティです。
プロパティの値には、static,fixed,relative,absoluteがあります。
今回はrelative,absoluteについての解説です。

まず簡単なabsoluteから解説していきます。
absoluteは絶対値と言う意味で、top,bottom,left,rightの位置指定のプロパティを組み合わせることで要素の順番や位置を無視して絶対的に配置させることができます。これはなんとなく想像できるかと思います。

そしてrelativeですが、こちらは相対値と言う意味です。
相対値とは必ず比較対象がないと成立しません。ではCSSの場合、比較対象とは何かというと今要素がいる位置です。なのでabsolute同様、位置指定のプロパティを組み合わせることが出来るのですが、今いる位置からどのくらい動くかを直接指定することが出来ます。

ちなみにこの位置のことを基準値などと言います。

実演

理論がわかったところで、実際に動かしてみます。

今の状態はこうですね。ちなみにアザラシと蜂を作ったつもりですｗ
コードを追加します。蜂を動かします。

css

.bee{
  position: relative;
  top: 100px;
  left: 200px;
}

どうでしょう？蜂が元いた場所の、上から100px、左から200px動きました。このようにrelativeは位置を指定することで元いた場所を基準に好きな場所へ移動させることができます。

ただしこう言った使い方はあまりしません。実はrelativeの基準点を上手くいかしabsoluteと合わせて使うことが殆どです。

relativeとabsoluteと合わせて使う。

これが一番オーソドックスな使い方です。
概要としては、親クラスにrelativeを指定して基準点を作り、absoluteで基準点からの絶対値を指定します。

コードを変えていきましょう。
※先程の.beeのコードは一旦消して置き換えましょう。

css

.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
  /* position:relative;でこのクラスが基準のポジションになる。 */
  position: relative;
}
.seal{
  position: absolute;
  top: 0;
  left: 0;
}
.bee{
  position: absolute;
  top: 0;
  left: 0;
}

まず基準点は色のかかった四角いブロック、つまり親要素です。そして子要素であるアザラシと蜂はabsoluteでtop0,left0がかかっています。これは左上に配置することを指定してます。

ちなみに画像が重なって見えるのは、float同様、要素の回り込みが発生しているからです。
floatと違うのは、後から配置した要素は基本的には上に重なります。

ではそれぞれの画像の位置を少し変えてみましょう。

css

.seal{
  position: absolute;
  top: 50px;
  left: 100px;
}
.bee{
  position: absolute;
  bottom: 0;
  right: 0;
}

まずアザラシは、基準点の上から50px、左から100pxの位置に配置しました。
次に蜂は、したから0px、右からも0pxの位置つまり、右下に配置しています。

応用編

基礎的な使い方がわかったところで少し応用的な使い方をします。
それはrelativeを使わず、absolute単体で使います。ではコードを変更します。
※relativeを消します。

css

.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
}

どうでしょうか？親クラスの枠外へ外れてしまいました。
親クラスのrelativeがないと自動的に bodyが基準点になります。なので画面の左上、右下を基準にして画像が配置されてしまいます。

要素の重なりを調整する。

先程「後から配置した要素は基本的には上に重なります」と解説しましたが、これを調整する方法をお教えします。

css

.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
  position: relative;
}
.seal{
  position: absolute;
  top: 50%;
  left: 50%;
}
.bee{
  position: absolute;
  top: 50%;
  left: 50%;
}

cssはこちらを使います。

画像のabsoluteにはそれぞれtop50%,left50%を指定しています。
基準点、つまり親要素の上から高さの50%、左から幅の50%

画面をみると画像が重なってます。アザラシくんの目に蜂の針が刺さってます。(そりゃ困った顔をしている訳だ・・・)
なので蜂を後ろに追いやります。z-indexと言うプロパティを使います。これは重なり順を調整するCSSで初期値を0として、数字が大きければ大きいほど最前面に配置されます。

css

.seal{
  position: absolute;
  top: 50%;
  left: 50%;
  /* 重なり順を１つ前に出す */
  z-index: 1;
}

これで重なり順を調整できました。

最後に

今回はpositionについて簡単にまとめてみました。
アニメーションと組み合わせたものをおまけとして載せたかったのですが時間の都合でここまでにします。手が空き次第追記します、ではお疲れ様でした。