はじめに
CSSのレイアウトについて、改めて勉強してみた。のpositon編
position
設定できる値
基本的な考え
その１ 「top、right、bottom、left」の効果有無 と 起点位置
staicだけは、「top、right、bottom、left」を設定しても効果はない。
statc以外は、「top、right、bottom、left」を指定して、位置を決める。
但し、起点となる位置が「relative、absolute、fixed、sticky」で異なる。
って感じかな。
その２ 通常フローの範囲内、範囲外
staic、relative、stickyは、通常フローの範囲内でレイアウト変更。
absolute、fixedは、通常フローの範囲外でレイアウト変更。
そもそも、通常フローとは？
要するに、ブロック要素とインライン要素で構成され、ブロック要素は新しい行として、縦方向にレイアウトされ、インライン要素は新しい行を作らない。
って感じかな。
で、通常フローを上書きしてレイアウトを変えられるプロパティがあると。
その一つに、「position」がある。
その３ 重ね合わせコンテキストの作成有無
sticky、fixedは、重ね合わせコンテキストを作成する。
上記以外は、重ね合わせコンテキスト作成しない。
重ね合わせコンテキストとは？
重ね合わせコンテキストは、重なり合うコンテンツがどのようにレンダリングされるかの視覚的な順序を決定します。
要するに、その名の通り、重なり合うコンテンツってことかな。
各値
static
デフォルト。
通常フローの範囲内で「top、right、bottom、left」を設定できない。
relative
通常フローの範囲内で「top、right、bottom、left」で設定できる。
起点は相対オフセットで配置。
つまり、親要素からってことなのかな？
sticky
通常フローの範囲内で「top、right、bottom、left」で設定できる。
起点は、直近のスクロールする祖先 および 包含ブロック（直近のブロックレベル祖先、表関連要素を含む）
抱合ブロックとは？
加えて、「重ね合わせコンテキスト」を生成。
absolute
通常フローの範囲外で、「top、right、bottom、left」で設定できる。
起点は、「static以外の設定場所」 OR 「ブラウザの左上」。
fixed
通常フローの範囲外で、「top、right、bottom、left」で設定できる。
起点は、「ブラウザの左上」
加えて、「重ね合わせコンテキスト」
振り返り
ようやく、CSSの基本的なレイアウトの考えが分かってきたかも。
なんとなく動いていたことが、論理的？に理解できるのは楽しい。