position なんとかは、個人的になかなか難しくて、なんとなく使っていた感じだったので、一旦学習し直してみました。
わかりやすく図をいれて記事を書いたので、ご参照いただけたら嬉しいです！
1. absolute と relative の関係
基準値の考え方
まず、position: absolute は、一番近い position: relative; を基準として位置調整するものです。
position: relative; を指定した要素の 内側 が基準になります。
その中にある position: absolute; な要素は「親要素の左上」が基準点になります。
例：四角（親要素）の左上に円ボタンを置きたい場合
.parent {
position: relative;
width: 200px;
height: 200px;
}
.child {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: red;
}
↑この場合、円ボタンの 左上の角 が四角の左上にぴったり付きます。ボタンの中心ではありません。
fixed（画面全体を基準にする）
position: fixed; の場合、ブラウザ画面全体の左上が基準になります。
スクロールしても位置は変わりません。
例：左上にボタンを固定したい場合
.btn {
position: fixed;
top: 0;
left: 0;
width: 40px;
height: 40px;
}画面左上にボタンの「左上の角」が固定されます。
top の数値は「要素の上端」を基準にする
top は要素の 上端 が基準になります。
つまり、ボタンの中心を中央に合わせたい時、そのまま top: 50% (left: 50%) と書くと、ボタンの上端 が中央に来てしまいます。
そこで使うのが transform: translateY(-50%) です。
3. 要素の「中心」を合わせたいとき
「円の中心を四角の角にぴったり重ねたい」ときに使うのが transform です。
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
これで、円の中心 が四角の左上角にぴったり合います。
4. よくある誤解
「top: 0; left: 0; は要素の中心をそろえる」と思いがちですが、
実際は 「要素の左上」をそろえる 指定です。
absolute の場合：基準は「親要素の左上」で、要素の左上がその位置に来る。
fixed の場合：基準は「画面の左上」で、やはり要素の左上がその位置に来る。
円や特殊な形を配置したいときには、必ず transform: translate() で補正をかけるのが基本です。
まとめ
ハンバーガーボタンの場合、position: fixed で位置調整していないロゴと、position: fixed で調整しているボタンの位置を合わせるには、calc を使った計算をするのが便利です。
それについては別の記事でご紹介しているので、よろしければご覧ください！
