見出し画像

positionの「relative」「absolute」がよくわからない人へ

ハル@helloco

positionの使い方を調べると、本来あるべき場所・・・とか、親要素を起点とする・・・とか、説明しているサイトが多いと思います。

この説明だけではイメージがしづらいという人に向けて
コルクボードとプリントに例えた説明をさせていただきます。

画像1

あまり深く考えずにこちらを見てください。↑
コルクボードを（親）・紙を（子）としています。

コードで書くとこうなります。

    <div id="corkboard">                <!--親/ コルクボード -->
       <img src="img/corkboard.png">
         <div class="paper">            <!--子/ 紙 -->
           <img src="img/paper.png">
         </div>
   </div>

CSSで、コルクボード (#corkboard)にposition: relative、
紙（.paper）へ、position: absoluteを設定します。


あなたの目の前に、コルクボードと紙があれば、紙は当然コルクボードに貼り付けますよね。

紙をボードのどこに貼ろうかな？と考えるイメージと同じで、
紙（.paper）に、top,left,right,bottomを設定する、ということになります。


画像2

紙（.paper）topの値を変更した３つの例です。

まず左。「top:   ;」と書くか、そもそもtopの記述をしない場合です。
値がないとabsoluteは無効となります。
よく「本来あるべき場所」と表現されるアレです。

次に中央。「top: 50%;」と書いてみました。
コルクボードの縦幅を100で割って、50の位置にきています。

最後に右。もうお分かりですね。
「top: 100%;」とかけば、コルクボードの縦幅を100で割って、100の位置に紙が貼られます。


紙とコルクボードを親子関係にして、
親にrelative、子にabsoluteを設定してあげる。

ちょっと模様替えしようか。コルクボードの場所を変えようかって時も、この設定をしていると、紙は貼られたまま移動できます。




では、コルクボードと紙の親子関係を解消してみましょう。

画像3


   <div id="corkboard">
       <img src="img/corkboard.png">
   </div>
   <div class="paper">
       <img src="img/paper.png">
   </div>

画像4

同じくCSSで、コルクボード (#corkboard)にposition: relative、
紙（.paper）へ、position: absoluteを設定しています。

「top: 50%;」と書くと、紙にとってボードは親ではないので無視です。
この場合<body>が親となりますので、ウィンドウ縦幅を100で割って、50の位置に紙が貼られます。

「top: 100%;」は・・・あれれ隠れちゃいました。
スクロールすると見れますね。ウィンドウ縦幅を100で割って、100の位置に紙が貼られるからです。

上記は、#corkboardにposition: relativeを設定しなくても、挙動は同じ。
だって紙にとってコルクボードは親でもなんでもない、他人だから。コルクボードの設定なんて紙にとってどうでもいいんです。
見ているのは、今の親（body）だけです。


まとめ

相対位置と絶対位置とかなんやねんって人！私も同じでした。
でも、こう考えると単純で簡単。ぜひ参考にしてみてください！