cssで好きな位置に要素を配置する方法


好きな位置に要素を配置したい

要素を好きな位置に配置したけど、どうやってやるのか?
何もしない状態だと、要素同士が重ならずに配置されてしまいます。
私自身も何度もこの方法を忘れてしまうので、備忘録として書いてます!

好きな位置に配置する方法

cssのpositionを使用します。

基本的には親要素に対して、位置を決めると思うので今回はその方法を記します。

positionにはstatic,relative,absolute,fixedがあります。その中で今回はabsoluteとrelativeを使用します。

親要素にrelativeを使用して、基準点を設定します。好きな位置に配置したい子要素に対してabsoluteを使用します。
これによって、親要素が基準になったので、子要素に対してtopやleftなどにより細かな位置を設定することで、好きな位置に要素を配置することができます。

私自身もこのabsoluteとrelativeをどっちに設定すれば良いか、すぐ忘れてしまうので今回書かせていただきました。
備忘録としてパッパっと書いたので、画像なんか使用してなくてすみません、、