CODEPREP | CSS基礎 position編を勉強したのでメモです。

---

fixed

• positionプロパティにfixedを指定した場合、位置指定が基準が画面のビューポート(ウィンドウサイズ)となり、スクロールしても動かなくなる

位置指定をつかって親要素いっぱいに表示する

• 要素を絶対位置(absolute)指定して、オフセットプロパティに全て0を指定すると、親要素に対して上下左右それぞれの距離が0であるという意味となる (= 親要素いっぱいに広がる)
• 親要素にもrelativeなどの指定が必要

位置指定をつかって全画面表示する

• 要素をビューポート固定(fixed)指定して、オフセットプロパティに全て0を指定する

2カラムレイアウト

• コンテナ要素を作って、relativeを指定する
• それぞれのカラムにはabsoluteと、width: n%;を指定する

固定ヘッダーを作る

• fixedを指定して、 top: 0;を指定する
• 横幅いっぱいにするために、right: 0; left: 0;も合わせて指定する
• コンテンツがヘッダーの高さ分隠れてしまうので、body要素にmargin-topを指定して隠れないようにする

floatによる左寄せ(left)

• absoluteを用いて左寄せにした場合との違いは、それ以降の要素が指定した要素の右側に回り込む
• floatプロパティを適用できるのは、位置指定されていない要素のみ

floatによる右寄せ(right)

• rightを用いると次の要素が左側に回り込むため、要素の並び順が右から順番になる

floatの解除(clear)

• clearプロパティを用いると、指定された要素はfloatから切り離され下に移動する (回り込みを解除できる)

floatした要素を親要素の高さと合わせるテクニック

• floatしている親要素に対して::after擬似要素を使ってfloatのclearを指定する (clearfix)
• 別のテクニックとして、親要素のoverflow: auto;を指定する