はじめに
本記事では、私が昨日
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の使い方を理解する！要素を重ねる方法
明日も頑張ろう！！
↧