【CSS】position:relative, absolute, fixed, stickyの違い一覧表

# はじめに
* positionは対象要素に設定するもの？親要素に設定するもの（例えばrelativeなど）？  
* 何を基準に位置指定されるの？  

よく分からなかったので以下を参考に整理してみました。一覧表のみです。実際のCSSの書き方や挙動については他を参照願います。  

[position - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/position)  
[レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Containing_block)  
[Layout and the containing block - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block)  

# 一覧表

<table>
	<tr>
		<td colspan="2" rowspan="3"></td>
		<td rowspan="2">-</td>
		<td colspan="4">位置指定要素</td>
	</tr>
	<tr>
		<td>相対位置<br>指定要素</td>
		<td colspan="2">絶対位置指定要素</td>
		<td>粘着位置<br>指定要素</td>
	</tr>
	<tr>
		<td>static<br>(初期値)</td>
		<td>relative</td>
		<td>absolute</td>
		<td>fixed</td>
		<td>sticky</td>
	</tr>
	<tr>
		<td colspan="2">配置</td>
		<td colspan="2">通常のフローに従って配置（ページレイアウト内に通常のフローに従って要素が配置されたときの空間が作成される）</td>
		<td colspan="2">文書の通常のフローから除外（ページレイアウト内に要素のための空間が作成されない）</td>
		<td>relativeに同じ</td>
	</tr>
	<tr>
		<td rowspan="2">包括ブロック</td>
		<td>直感イメージ</td>
		<td colspan="2"><b>直近のブロック要素のコンテンツ領域</b></td>
		<td><b>直近の位置指定要素のパディング領域</b>。なければ<b>表示画面</b></td>
		<td><b>表示画面</b></td>
		<td>relativeに同じ</td>
	</tr>
	<tr>
		<td>詳細</td>
		<td colspan="2">親ノードからルートノードまでを遡っていったときに最初に出てくる<b>ブロックコンテナー要素または整形コンテキストを確立する要素のコンテンツ領域</b></td>
		<td colspan="2">・親ノードからルートノードまでを順に遡っていったときに最初に出てくる<b>下表1~7のいずれか（fixedの場合1を除く）に該当する要素のパディング領域</b><br>・上記の該当要素がない場合は<b>初期包括ブロック</b></td>
		<td>relativeに同じ</td>
	</tr>
	<tr>
		<td rowspan="3">topなどの設定時</td>
		<td>基準</td>
		<td>-</td>
		<td>包括ブロック（直感としては通常配置時の自分自身）</td>
		<td colspan="2">包括ブロック</td>
		<td>直近のスクロール要素および包括ブロック</td>
	</tr>
	<tr>
		<td>%指定時の基準値(100%値)</td>
		<td>-</td>
		<td colspan="4">height, top, bottom：包括ブロックのheight<br>
width, left, right, padding, margin：包括ブロックのwidth</td>
	</tr>
	<tr>
		<td>その他</td>
		<td>top<br>left<br>bottom<br>right<br>は効果なし</td>
		<td>-</td>
		<td>・非置換要素の場合は、top、bottomを設定するとその間が埋まり、left、rightを設定するとその間が埋まる。<br>※heightやwidthがautoに限る。<br>・マージンは他要素のマージンと相殺されない。</td>
		<td>-</td>
		<td>・包含ブロックが閾値 に達するまでは相対的に配置。<br>・達してから包含ブロックの反対の端に来るまでは固定。</td>
	</tr>
	<tr>
		<td colspan="2">z-index</td>
		<td>効果なし</td>
		<td colspan="2">auto ではない場合、新しい重ね合わせコンテキストを作成</td>
		<td colspan="2">常に新しい重ね合わせコンテキストを作成</td>
	</tr>
</table>

|  | 包括ブロックになりうる要素 |
|:-:|:--|
|1|[position](https://developer.mozilla.org/ja/docs/Web/CSS/position)がstatic以外（つまり**位置指定要素**）|
|2|[transform](https://developer.mozilla.org/ja/docs/Web/CSS/transform)の値がnone以外|
|3|[perspective](https://developer.mozilla.org/ja/docs/Web/CSS/perspective)の値がnone以外|
|4|[will-change](https://developer.mozilla.org/ja/docs/Web/CSS/will-change)の値がtransform又はperspective|
|5|[contain](https://developer.mozilla.org/ja/docs/Web/CSS/contain)の値がlayout、paint、strict、contentのいずれか|
|6|[backdrop-filter](https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter)の値がnone以外|
|7|ブラウザがFirefoxで[filter](https://developer.mozilla.org/ja/docs/Web/CSS/filter)の値がnone以外又は[will-change](https://developer.mozilla.org/ja/docs/Web/CSS/will-change)の値がfilter|

* [初期包括ブロック](https://developer.mozilla.org/ja/docs/Web/CSS/Containing_block#%E5%8C%85%E5%90%AB%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%AE%E8%AD%98%E5%88%A5) は[ビューポート](https://developer.mozilla.org/ja/docs/Glossary/Viewport) (連続的なメディアの場合) またはページ領域 (ページメディアの場合) の寸法を持つ。    
* 重ね合わせコンテキストについては[こちら](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)を参照。  
* マージンの相殺については[こちら](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)を参照。  
* ノードについては[こちら](https://qiita.com/nekotadon/items/1380e6a533896356631e)を参照。  
* stickyについては言葉では伝わりにくいので[こちら](https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Positioning#position_sticky)にある例を参照。