HTMLでうまく表示されない

Question

以下のhtmlの<div class="main top-main">と<div class="about-main">の要素が被って表示されます。
順番に表示させるにはどうしたらいいのでしょうか？

<div class="main top-main">
  <div class="top-message">
    <h2>AAA</h2>
    <p>AAA</p>
  </div>
</div>

<div class="about-main">
  <h2>AAA</h2>
  <p>AAA</p>
  <img class="about-img" src="/aaa.png">
</div>

.main {
  position: absolute;
  top: 64px;
  width: 100%;
  height: auto;
  min-height: 100%;
  background-color: #fff;
}
.top-main {
  padding: 200px 0 100px;
  text-align: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  color: black;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center 50%;
  background-size: cover;
  background-image: url("/summer-book.jpg");
}
.top-message {
  position: relative;
}
.about-main {
  padding: 180px 8% 0;
  color: black;
}
.about-img {
  width: 84%;
}

Answer 1

試してませんが、cssのabout-mainもposition: absolute;にしてみては？

Comments

[korr]

解決いたしました！ありがとうございます！