[CSS]<header>と<main>の背景や文字が重なる？

はじめに

本記事では、私が昨日
headerとmainの背景や文字が重なることを解決した方法を記述します。

結論

いきなり結論ですが、
position absoluteが邪魔をしています。

これを記述していることで、本来下に来るはずので記述したものが、
出て来なくなります。

例

超簡単ですが、
①

<div class="contents">
   <div class="top-content"> 
   </div>
   <div class="bottom-content">
   </div>
</div>

.top-content{
  height: 250px;
  width: 500px;
  background-color: lightcoral;
}

.bottom-content{
  height: 250px;
  width: 500px;
  background-color: lightblue;
}

②

<div class="contents">
   <div class="top-content"> 
   </div>
   <div class="bottom-content">
   </div>
</div>

.top-content{
  height: 250px;
  width: 500px;
  background-color: lightcoral;
  position: absolute;
}

.bottom-content{
  height: 250px;
  width: 500px;
  background-color: lightblue;
}

というものがあったとします。

実際の図

①

②

青色が消えました。

position absoluteを使用すると、
「位置が浮いてしまう」というみたいです。

終わりに

結論はかなり簡単な話でしたが、
何時間も悩んでいました。

悩んでいる途中で検証を使ったらかなり便利なことに気がつき、
検証で原因を突き止めました。

CSSで実験をしたいとき、検証を使うと良いかもしれませんね！

以下参考サイトです。
position:absoluteを使うと次のブロックが重なってしまう
CSSのposition:absoluteとrelativeの使い方を理解する！要素を重ねる方法

明日も頑張ろう！！