配置が思った通りにならない時に、混乱してしまうので
備忘録として残しておきます。
書くにあたり、参考にさせていただいたサイト。
【CSS】positionプロパティを使いこなす！relative・abosolute・fixedの使い方
absolute使いこなせるまで、1つずつチェック確認する必要あるの忘れないためにも、上記サイトから文章引用します
ポイントをまとめると、「absolute」の使用は必ず挙動を確認し、それを経験としてまとめておかないと理解できない挙動が発生する可能性があるということです。「margin」や「padding」の設定、ブロック要素とインライン要素での挙動の違いには特に注意しておいてください。
以下、実際にやった手順を記載。
これどおりにやり、修正必要なら逐次修正。
1 最も近いrelativeのセレクタがどこにあるか検索する
2 その基準から動かしたいという理解であっているか確認。
あっていなかったら、relativeのセレクタを変更する、それでもうまく行かない場合は、3に
3 widthとheightの範囲が、イメージしたとおりかデベロッパーツールで確認。
違っていたら直す。
4 paddingやmarginが効いていないかを確認する
5 うまくいかなったから、再度、上記のサイトをみて確認する。