【HTML/CSS】レイアウトの整え方あれこれ①

※この記事は、プログラミング学習サイト「Progate」の学習内容に関するものです。

「HTML&CSS 学習レッスン 中級編」の学習中、
結構つまづいてしまった箇所があったので、
明日の自分のために書き残しておきます。
･･･仕事終わり & 深夜でめちゃくちゃ眠いので、
ｺｯｸﾘｺｯｸﾘ し始めるまで書きます💦

◎「レッスン部分を作ろう / 6.レイアウトを整えよう」
　⑴　position プロパティ
　　・position: absolute; と position: relative; の2種類がある
　　・absolute; はサイト全体の左上部分を基準の位置とする

CSS

box1 {
　position: absolute;
  top: 40px;
　left: 100px;
}　

　→ サイト全体の左上に基準を指定した後、
　　上に40px分，左に100px分だけ間隔を開けた位置に移動させる

CSS

box1(※親要素) {
  position: absolute;
}

box2(※子要素) {
　position: relative;
  top: 40px;
　left: 100px;
}　

　→ 親要素に position: absolute; を指定することで、
　　親要素の左上部分が基準位置になる
　　子要素に position: relative; を指定することで、
　　親要素の左上部分から上に40px分、左に100px分だけ間隔を開けた位置
　　に移動させる

ん－、限界が来たのでここまで！続きはまた明日書きます！💦
ご覧いただき、ありがとうございました！おやすみなさい🌌