HTML CSS 【初心者向け】positionの使い方

こんにちは★
初心者の私がコーディングする際に、画像の上に見出しを載せたい時や
要素を重ねて表示したい時に使うプロパティ　position　について学習してみようと思います。

まずはHTMLに親要素と子要素を準備します。

CSSには親要素と子要素に分かりやすいように色を付けて範囲を指定し、
親要素には position: relative; を指定します。
ブラウザ上で確認すると親要素の上に子要素のbox1がぴったりとくっついている状態です。

次に子要素に position: absolute;　を指定し、box1を動かしたい位置までの値を設定します。
ここでは簡単に top: 30px;　left: 30px;　と指定しました。

（ position: absolute; を指定したら必ずtop:〇px; left:〇px; または right:〇px; bottom:〇px; を一緒に指定しましょう！）

実際にブラウザ上で確認してみましょう。

指定したとおりにbox1が上から 30px 移動していて、左から 30px 移動しています。
このように、親要素に position: relative; 、 子要素に position: absolute; を指定することによって
要素を重ね合わせることができます。

（画像https://code-jump.com/）

ぐっとおしゃれなデザインが出来上がるのでここの基礎をおさえておくとデザインの幅も広がると思います。
頑張ってマスターしていきましょう！！

以上、初心者の私の備忘録でした★