CSSのpositionが理解できない?触ってpositionを学ぼう

CSSのpositionが理解できない?触ってpositionを学ぼう

しんぺい

こんにちは!しんぺいです。

初心者エンジニアやプログラマーでも多少はCSSを書けないと話にならないですよね。

え、CSSのpositionがわかりづらい?

たしかに初心者にとってはとっつきにくいですけど…
まさか諦めてpositionを放置したりしてないですよね?

CSSのpositionとは?どんな時に使えばいいの?

CSSのpositionは、CSSの中でも使用頻度はトップクラスに入るほどのプロパティです。

参考 デザイナーが絶対に外せない8つのCSSプロパティsitepoint

それなのに、概念や考え方は鬼のように難しく、初心者エンジニアやプログラマーの心を平気でくじいていきます。

positionはズバリ、要素の配置位置を決定するものです。

指定する値として以下の4つがあります。

  1. static: 初期値です。配置方法を指定しません。
  2. relative: 相対位置で指定します。
  3. absolute: 絶対位置で指定します。「top」、「left」、「right」、「bottom」で位置を指定します。
  4. fixed: 絶対位置で指定し、かつスクロールしても固定されます。

これら4つの意味がわからなくても大丈夫です。順番に見ていきましょう。

今回説明していくにあたり、次のようなHTML構造を想定しています。

HTMLの構造

このHTML構造を、実際のHTMLコードとして表現すると以下のようになります。

<body>
    <div class="parent-div">
        <div class="child-div-1">I'm</div>
        <div class="child-div-2">Bicepper</div>
    </div>    
</body>

CSSのposition:static

さて、まずはstaticから…といきたいところですが、static特になにもしません

自分でpositionを指定しなかった場合は、このstaticがCSS側で勝手に割り振られる、ということだけ覚えておきましょう。

CSSのposition:relative

次はrelativeです。

最初の一覧で、relative相対位置で指定すると書きました。「相対」というのは、他の要素に影響を受けて位置が決定するということです。

では、どこの要素の影響を受けるのでしょうか?

ここからは、オンラインエディターである「CODEPEN」というサービスを利用します。
管理者じゃなくても自由に編集できるので、ぜひ自由に触ってみてください。

試しに、child-div-2クラスにposition:relative;をかけてみましょう。

すると、このようになります。

See the Pen
NewGorilla – position:relative-1
by NewGorilla (@NewGorilla)
on CodePen.

特に何も変化していないように見えますが、これが正解です。

position:relative;をかけられた要素は、同一レイヤーにいる他の要素のpositionの影響を受けます

この場合、同一レイヤーはchild-div-1になります。

そしてこのchild-div-1にはデフォルトでposition:staticがかかっています(コードには書いていません)ので、child-div-2はこのstaticの影響を受けることになります。

つまり、child-div-2は以下の画像の矢印の位置を基準に、自分の位置を決めることになります。

CSSのposition:relative;の基準は同一レイヤーのposition

CSSのposition:absolute

今度はabsoluteです。

absoluteの絶対位置というのは、親要素の影響を受けて位置が決定するということです。

試しに、child-div-2クラスにposition:absolute;をかけてみましょう。位置指定はしません。(bodyにposition:relative;がかかっていますが、CODEPENの仕様に対処するためのもです。)

See the Pen
NewGorilla – position:absolute-1
by NewGorilla (@NewGorilla)
on CodePen.

少し変わりましたね。

absoluteを指定すると、指定された要素は元の固定位置を失います。つまり自由な状態です。

しかし、位置指定をしていませんので、どこに行ったらいいかわからない状態です。そのため、固定位置は失ったものの、元の場所に居続けます。

今度は位置指定をしてみましょう。

See the Pen
NewGorilla – position:absolute-2
by NewGorilla (@NewGorilla)
on CodePen.

child-div-2クラスにtop:0;left:0;を指定したところ、左上に移動しました。

top:0;left:0;というのは、「上から0px、左から0pxのところに移動してね」という意味です。つまり、現在はこの矢印を起点に位置を決めていることになります。

CSSのposition:absolute;の基準は親要素のposition

プログラミング初心者

あれ?child-div-2の親はparent-divじゃないの?

と思った方、鋭いです。
実は、absoluteにはこんなルールがあります。

MEMO
absoluteを指定された要素の親要素がposition:staticだった場合、その親要素は無視され、次の親要素のpositionを見に行く

これは、position:static以外が指定されている親要素にぶつかるまで繰り返され、最終的にはウィンドウ全体に準ずる

今の状況を確認すると、親要素であるparent-divのpositionは、デフォルトのstaticのままですね。

ですから、この要素は無視されます。

次の親要素であるbodyではposition:relative;が指定されていますので、bodyに準ずるようになりました。

しんぺい

ここの理解がかなり難しいかもしれません。

が、これを理解できれば、positionはほとんど理解できたようなものです。

では、parent-divposition:relative;に変更してみましょう。

See the Pen
NewGorilla – position:absolute-3
by NewGorilla (@NewGorilla)
on CodePen.

位置が変わりましたね。

今度はちゃんと親要素にposition:relative;がかかっていますので、今の基準となる矢印はここになります。

CSSのposition:absolute;の基準は親要素のposition

CSSのposition:fixed

fixedの定義はabsoluteとほぼ同じです。

何が違うのかというと、問答無用でウィンドウ全体を基準とし、スクロールをしても指定した場所に固定されます

言葉だけではわかりづらいので、実際に見てみましょう。

See the Pen
NewGorilla – position:fixed
by NewGorilla (@NewGorilla)
on CodePen.

画面をスクロールしても、child-div-2は画面に固定されているのがわかると思います。

positionに深く関わってくる「z-index」

ここから3次元の話になります。

先ほどのposition:absolute;の最終系をもう1度見てみましょう。

See the Pen
NewGorilla – position:absolute-3
by NewGorilla (@NewGorilla)
on CodePen.

よく見ると、child-div-2child-div-1の上に重なっているように見えますね。

今はchild-div-2position:absolute;がかかっていて、child-div-1はデフォルトです。そのため、child-div-2の方が優先されて、以下のように重なっています。

z-indexは3次元を調整する

そこで、この重なりを指定するのがz-indexプロパティです。
単純に指定した数値が大きい方が、上となります。

child-div-2z-index:10;child-div-1z-index:11;position:relative;を指定してみます。

See the Pen
NewGorilla – z-index-1
by NewGorilla (@NewGorilla)
on CodePen.

child-div-1が上になりました。

【まとめ】positionは絶対に習得しよう

CSSのpositionについて解説しました。

今回は説明のために簡略化していますが、positionz-indexの組み合わせ、そして深い階層になっていると、非常に複雑化し予期しない動きをすることが多々あります。

習得するまでは大変かもしれませんが、習得してしまえば表現できるデザインの幅がグッっと広がるので、positionは絶対に習得しましょう。

しんぺい

positionの理解は難しいですが、何回も挑戦していればある日突然わかることがあります。パズルが解けたみたいに。

positionを習得しないでコーディングをするのは不可能に近いので、絶対に習得しましょう!