position: relativeの使いどころ

potision: relativeって使いどころがなかなかわからないですよね。そんな中で、これを使う機会に出会ったので紹介します。

例えば、marginの横幅をautoにする場合って、親要素のdivに対してautoが適用されます。親要素がない場合は、bodyタグのwidthを基準として適用されます。そうしたとき、body要素でなく、適切に親要素のwidth幅を基準としてmargin-left: autoを適用したい場合に、 position: relative; を指定する必要があります。

つまり、親要素と子要素のそれぞれにをposition;relative; を適用し、　及び、margin-left: auto;にすることで、親要素を基準としたmarginのautoを適用することができます。