はじめに
- positionは対象要素に設定するもの？親要素に設定するもの（例えばrelativeなど）？
- 何を基準に位置指定されるの？
よく分からなかったので以下を参考に整理してみました。一覧表のみです。実際のCSSの書き方や挙動については他を参照願います。
position - CSS: カスケーディングスタイルシート | MDN
レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDN
Layout and the containing block - CSS: Cascading Style Sheets | MDN
一覧表
| - | 位置指定要素 | |||||
| 相対位置 指定要素 |
絶対位置指定要素 | 粘着位置 指定要素 |
||||
| static (初期値) |
relative | absolute | fixed | sticky | ||
| 配置 | 通常のフローに従って配置（ページレイアウト内に通常のフローに従って要素が配置されたときの空間が作成される） | 文書の通常のフローから除外（ページレイアウト内に要素のための空間が作成されない） | relativeに同じ | |||
| 包括ブロック | 直感イメージ | 直近のブロック要素のコンテンツ領域 | 直近の位置指定要素のパディング領域。なければ表示画面 | 表示画面 | relativeに同じ | |
| 詳細 | 親ノードからルートノードまでを遡っていったときに最初に出てくるブロックコンテナー要素または整形コンテキストを確立する要素のコンテンツ領域 | ・親ノードからルートノードまでを順に遡っていったときに最初に出てくる下表1~7のいずれか（fixedの場合1を除く）に該当する要素のパディング領域 ・上記の該当要素がない場合は初期包括ブロック |
relativeに同じ | |||
| topなどの設定時 | 基準 | - | 包括ブロック（直感としては通常配置時の自分自身） | 包括ブロック | 直近のスクロール要素および包括ブロック | |
| %指定時の基準値(100%値) | - | height, top, bottom：包括ブロックのheight width, left, right, padding, margin：包括ブロックのwidth |
||||
| その他 | top left bottom right は効果なし |
- | ・非置換要素の場合は、top、bottomを設定するとその間が埋まり、left、rightを設定するとその間が埋まる。 ※heightやwidthがautoに限る。 ・マージンは他要素のマージンと相殺されない。 |
- | ・包含ブロックが閾値 に達するまでは相対的に配置。 ・達してから包含ブロックの反対の端に来るまでは固定。 |
|
| z-index | 効果なし | auto ではない場合、新しい重ね合わせコンテキストを作成 | 常に新しい重ね合わせコンテキストを作成 | |||
| 包括ブロックになりうる要素 | |
|---|---|
| 1 | positionがstatic以外（つまり位置指定要素） |
| 2 | transformの値がnone以外 |
| 3 | perspectiveの値がnone以外 |
| 4 | will-changeの値がtransform又はperspective |
| 5 | containの値がlayout、paint、strict、contentのいずれか |
| 6 | backdrop-filterの値がnone以外 |
| 7 | ブラウザがFirefoxでfilterの値がnone以外又はwill-changeの値がfilter |