要素同士を重ねて表示する方法 #初心者

こんには！
今回は要素同士を重ねて表示するレイアウトについて
書いていこうと思います💭

今回紹介するのは
position: absolute; とposition: relative; です！

position: absolute;とは？

HTMLの要素同士は通常は重なって表示されることはありません。
しかし、position: absolute;を使うと要素同士を重ねて表示させることができます。

サイト全体の左上の部分を基準として、そこからの位置をtopとleftを用いて指定してあげます。　　
また、rightやbottomを併用することも可能です。

実際に例を挙げると。。。

index.html

  <body>
      <div class="box1">box1</div>
      <div class="box2">box2</div>
  </body>

position指定なしの場合

style.css

.box1{
  background: orange;
  width: 300px;
  height: 300px;
}

.box2{
  background-color: aqua;
  width: 300px;
  height: 300px;
}

こんな感じになります。

positionを指定ありの場合

stile.css

.box1{
  background: orange;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50px;
  left: 70px;
}

.box2{
  background-color: aqua;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 120px;
  left: 140px;
}

こんな感じで画面の左上を基準としてbox1とbox2を重ねて表示させてあげることができました。

基準位置の変更

position: absolute;の基準位置はサイト全体の左上部分ですが、この基準位置を変更することも可能です！

基準としたい親要素にposition: relative; を指定すると、その要素の左上部が基準位置になります。

box1を基準位置にして要素を重ねた場合

style.css

.box1{
  background: orange;
  width: 300px;
  height: 300px;
  position: relative;
}

.box2{
  background-color: aqua;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 30px;
  left: 30px;
}

こんな感じでbox1の左上を基準としてbox2が配置されるようになりました。

今回は簡単な重ね方ですが、この方法を使っていろんなレイアウトができるかなって思います！

そんなに出番はないかもしれないけど　　
引き出しとして覚えておきたいレイアウトの一つでした✨

今回はこのへんで！
ありがとうございました。