【初心者】positionは、relativeで範囲を決めてabsoluteで動かそう！ #CSS

はじめに

入社前にHTMLとCSSをかじったとはいえ、知らないタグや使い方が大量に出てきた研修課題。その中でもpositionの使い方をどんなに調べても意味不明だったので、自分が理解した（と思っている）内容をまとめました。

positionとは

positionはcssプロパティの1つで、配置方法を設定します。ここで注意しないといけないのは、配置方法を設定するだけでその位置を指定しているわけではないということ。実際に「ここに表示！」とする場合は、top・bottom・right・leftなどで位置を指定する必要があります。

話は戻って、どういう時にpositionプロパティを使うことになるのかというと、よく画像の右上や左上あたりに「NEW」というアイコンがあったり、画像の上に何かを重ねて表示したいときに使用するらしいです。（ふむふむ・・・）ググッて調べてみると「ボックスの配置方法（基準位置）が、相対位置（relative）か絶対位置（absolute）かを指定する際に使用します。」とか書かれています。が！この相対位置とか絶対位置と言われた途端に分からない・・。

相対位置と絶対位置

言葉の意味を確認すればちょっとわかる気がしてくるかと思い調べてみました。

・相対：他との関係の上に存在あるいは成立していること
・絶対：他に比較するものや対立するものがないこと

つまり、相対位置の配置方法にすると基準にする位置がその時々で異なり、絶対位置の配置方法にすると指定した位置になにがなんでも表示される融通が利かないやつなのかと。
ここでさらに疑問なのが、何を基準に配置されるかということ。相対位置の説明では「ずれている図」が、絶対位置の説明では「重なっている図」が描かれていることが多いのですが、それは基準を軸に動きの違いを説明しているからです。いろいろな表現方法はあると思うのですが、わたしは下記のように理解しています。

・相対位置の基準：本来その要素が表示される位置を基準にする
・絶対位置の基準：親要素を基準にする

absoluteを使うときはrelativeとセットで使おう！

relativeとabusoluteがそれぞれどういう動きをするかはいろいろ調べていただくとして・・。わたしがググって調べてもなかなか目につかなかったのがこのセット使い。全然分かっていない初心者からすると、absoluteとrelativeは使い分けるものだと思い込んでいたので「なんでこれを教えてくれなかったんだっ！！」と声を大にして言いたいところですが、書いてあるサイトにはきちんと書いてありました（汗）
親要素を基準に位置を決めるabsoluteを使用する場合は、必ず親要素にrelativeを設定しておく必要があります。指定しない場合どうなるかというと、relativeを探してさまよい、自分が思っているところに出したいものが表示されません。そのため、今回のタイトルにもある通り、relativeで動かせる範囲を決めてabsoluteで位置を指定するというセット使いと覚えておいた方がいいでしょう。

牧場の羊に例えて考えよう

はい、久しぶりのたとえ話です。笑
今回はrelativeを牧場に、absoluteを羊にして考えてみました。
羊は柵のある牧場内でしか動き回ることが出来ないのでabsoluteになります。そのため、羊の親要素に該当する牧場はrelativeを指定しておく必要がありますね。

もし牧場ごと移動したい場合（いや、本来はありえないですが・・）は、牧場の配置位置を指定してあげると、羊の位置を変えずに牧場の位置を変更することが出来ます。これがセット使いの良いところだなと個人的には思っています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <div class="area">
      <img src="img/area.png" width="450px">
      <div class="sheep">
        <img src="img/sheep.png" width="100px">
      </div>
    </div>
  </body>
</html>

.area {
        position: relative;
        width: 450px;
        /*牧場ごと移動したい場合は位置を指定します*/
        left: 30px;
        /* 以下の設定は分かりやすいようにするためで必須ではありません。 */
        border: 1px solid black;
}

.sheep {
         position: absolute;
         /* 以下の値をいろいろ変更し羊の位置を変えます（全部指定する必要なし） 
         top: ;
         bottom: ;
         left: ;
         right: ;
         */
         top: 50%;
         left: 20%;
        /* 以下の設定は分かりやすいようにするためで必須ではありません。 */
        border: 1px solid red;
}

上記ソースをそのままコピペしてファイルを作成し、実行すると下記の結果イメージのように表示されます。cssで指定している位置のパーセンテージの値を変更することで、羊の位置が牧場内（正確には枠線内）で動かせることが分かると思います。あえて位置を指定せずに実行してみるのも面白いと思います。

正しく設定出来ているか確認したいとき

正しく設定出来ていれば、absoluteで設定している位置をtop:0もしくはbottom:0のどちらかだけ設定して実行すると、動いている上下の範囲（＝relativeの範囲）が分かります。うまく親要素にrelativeが設定出来てない場合は画面から消えたり、画面の一番上にかろうじて表示されていたりします。わたしはいい感じに表示されるようになっても、このチェックはなるべくするようにしています。

まとめ

調べても調べても全然理解できなかったposition。結局最後は先輩に解説してもらってようやくここまで理解したのですが、どんなに考えても分からない場合は人に解説してもらうのが一番分かるものですね。結局、相対位置と絶対位置はなんだったんだろう・・とちょっと思ってしまったのですが、今のところはセット使いだけ覚えておくことにしました。
自分で勉強して理解することも大事ですが、間違って覚えてしまうリスクもあるので、先輩たちに直接聞いて確認することも忘れないようにしたいなと改めて思いました。