position: relative;（相対位置）
その要素の元の位置を基準にして動かすことができます。
ほかの要素のレイアウトには影響しません。
.box {
position: relative;
top: 20px;
left: 10px;
}
position: absolute;（絶対位置）
親要素（もしくは最も近い position が設定された要素）を基準にして位置を指定します。
.box {
position: absolute;
top: 50px;
left: 100px;
}
position: fixed;（固定位置）
ブラウザの画面（ウィンドウ）を基準にして常に同じ場所に固定されます。
スクロールしても動きません。
.box {
position: fixed;
top: 0;
right: 0;
}
position: sticky;（スティッキー／追従）
スクロールするときに、ある位置までは通常通り動き、
その位置に達すると固定される特殊な動きです。
主にヘッダーやメニューに使われます。
.header {
position: sticky;
top: 0;
}
static 通常の位置 動く デフォルト
relative 元の位置 動く 少し位置を調整したいとき
absolute 親要素（position付き） 動かない 特定の位置に配置したいとき
fixed 画面（ウィンドウ） 動かない ヘッダー・ボタン固定
sticky スクロール位置 条件で固定 追従ヘッダーなど