【CSS】CSSレイアウト組まとめ（中編）

こんにちは！ゴリラから人間に転生した
ゴリラ出身のフロンドエンドエンジニア、ケイジャニストやまだです！
さて今回のネタは前回からの続きってことで、CSSのレイアウト組(中編)です！
前回はもっとも基本的なdisplay:inline-blockを使ったレイアウト組と、
floatを使用したレイアウト組に関する指定方法と、崩れた時の見直しポイントをご紹介しました！

※前回見逃しちゃったって人はこちらご参照ください！
【CSS】CSSレイアウト組まとめ（前編）
https://grow-group.jp/archives/1654/

今回はこれまたcssでレイアウトを組んでいくときによくお世話になる
プロパティ、positionについてご紹介いたします！positionは要素の重ね合わせを表現するz-indexプロパティや、その他横並び以外の自由なレイアウトを可能にすることから、巷でよく見かける「スクロールに追走してくるヘッダー」や「ギャラリー」などjQuery等と絡めていろんな表現を可能にする重要プロパティ。今回は簡単な使い方と使いどころを念頭にまとめてみました！

ぜひお役立てください！

positionの使いどころ

通常cssでレイアウトを組んでいくときは「横並び」が基本。
positionを使えば、そんな基本の横並びでは表現が難しい「ボックス同士を重ねる」などのレイアウト組が可能です。

その他としては、追走してくるヘッダーや、ボックスに対して右下に固定表示させるなどの固定配置が可能で、こういった配置はfixedやabsoluteの指定で実現できます。

以上のことから、「凝ったギミックを表現する」時や「どこかに固定表示させたい」といった時が使いどころといえるでしょう！

positionのプロパティ「4つ」についてサクっと

通常ボックスモデルの幅などの数値は該当のボックスに対して「左上」を基準にして計算されますが、positionを使うとその「左上」という基準を変更することが可能になり、自由に配置することができます！

positionプロパティの値は以下4つです。

このうちレイアウト組で使用するのはrelativeとabsoluteの組み合わせ。
あとはfixedをよく使いますが、順にご紹介いたします！

position:relativeとposition:absoluteの組み合わせ

position:relativeとposition:absoluteについてですが、
基本的に親ボックスにposition:relativeを指定し、その指定された親ボックスを基準に
absoluteで対象の子ボックスの位置を指定する、といったことを行いますので、基本セットで使います(セットで覚えちゃった方が楽です。。。)

まずは単純に親ボックスへposition:relative、子ボックスにposition:abosluteを指定するだけのものを作ってみましょう。

何も起きませんね（笑）
次に位置を指定してみましょう。

位置の指定(top、right、left、bottom)

position:relativeを指定した親ボックスの左上を基準に
top、right、left、bottomプロパティを使って位置を指定します。

位置が変わりました。

z-indexとの併用

positionを指定したボックスにはz-indexが使えます。
z-indexを使うと、指定したボックスの重なり順序を指定することができます。

先ほどのサンプルにボックスを二つ追加して、重なり順序を指定し、
重ね合わせてみましょう。

(例)position:absoluteを指定したボックスを重ねたサンプル

z-indexは重なり順を指定するプロパティです。思わぬ崩れを引き起こすことがあるので、こちらもpositionを使う時には指定するようにしておくといろいろ良いかもしれません。

利用時の注意点

大変便利で
「これならなんでも表現できるやんけ！」と
思いがちですが、注意点があります。
position:abosoluteを指定した要素を内包する、position:relative指定された親ボックスは
「高さ」を失います。

なので続く要素がそのまま予期せぬ崩れを起こしたりすることがあります。
position: relativeとposition: absoluteをセットで使う場合は、
必ず親要素に高さを指定するか、その分marginやpaddingで調整するなど、
「高さを保持すること」を片隅に覚えておくと良いと思います。

position:fixedでウィンドウ基準に絶対配置

さて、position:fixedですが、こちらは基準が「ウィンドウ」になります。
サンプルは以下です。

今度はスクロールしてみましょう。
まるで「追走してくる」ように見えませんか？

これはブラウザのウィンドウを基準にして配置されていおり、中のコンテンツは普通にスクロールしているのでそんな風に見えるんですね。
背景に画像や動画を固定する表現を見かけますが、それも基本的にはこのfixedプロパティを使います。パララックス効果がでてなかなか面白い表現ですよね。

さて、このposition:fixedですが、特有のバグが潜んでいます。

fixed指定の注意点

・bodyにtransformを指定していると、基準がウィンドウではなく親ボックスになってしまう。
予想できないまさかのハマりパターンです。コーディング時には注意したいですね。bodyでtransform使うときは気をつけましょう。

・iphoneでスクロール途中から固定できない。
よくヘッダーをスクロール途中から固定するといった表現が使われますが、これがうまくいかない時があります。こういうときは対象要素にtransform: translate3d(0 ,0 ,0)を指定して解決できることがあります。端末の処理の関係でスクロール中になにかするのができないといった内容が原因のようです。translate3dでGPUを使えばできるようですのでハマった時にはお試しください！

まとめ

いかがでしたか？
positionを使うと様々な表現が可能になるのでぜひ積極的に使ってみてください！

次回は後編です！display:tableやdisplay:flex、そしてマルチカラムレイアウトなど比較的新しいプロパティたちを使った内容にして行こうと思います！