소개

이 기사에서는 내가 어제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의 사용법을 이해한다! 요소를 겹치는 방법

내일도 힘내자! !