position: absolute;を指定していない要素が重なる

重ねたくない要素が重なってしまいます。

latest-topicsをcontents-wrapperの下に配置したいですが重なってしまいます。
contents-wrapperにはposition:absolute;を指定しているのですが、これが原因でしょうか。
ヘッダーにも指定しているので、header部分をdivで囲ってそこに画像指定をしてposition:absolute;を使用しないようにしたりしてみましたが、レイアウトが崩れてしまいます。
latest-topicsを下に配置するにはどうすればいいでしょうか。
記入しているコードではわかりやすいようにlatest-topicsに背景色をつけています。
拙い文章ですみません。

HTML
1<header>
2  <h1 class="site-title">
3    <a href="./nmt.html">
4      <img src="img/site-logo.png" class="logo">
5    </a>
6  </h1>
7
8  <!-- ハンバーガーメニュー部分 -->
9<div class="drawer" id="burger">
10
11  <!-- ハンバーガーメニューの表示・非表示を切り替えるチェックボックス -->
12  <input type="checkbox" id="drawer-check" class="drawer-hidden" >
13
14  <!-- ハンバーガーアイコン -->
15  <label for="drawer-check" class="drawer-open" id="click"><span></span><p class="menu">menu</p>
16  </label>
17
18  <!-- メニュー -->
19  <nav class="drawer-content">
20    <ul class="drawer-list" id="humber">
21      <li class="drawer-item">
22        <a href="#desa" style="text-decoration:none;">About</a>
23      </li><!-- /.drawer-item -->
24      <li class="drawer-item">
25        <a href="#services" style="text-decoration:none;">Service</a>
26      </li><!-- /.drawer-item -->
27      <li class="drawer-item">
28        <a href="#newses"  style="text-decoration:none;">news</a>
29      </li><!-- /.drawer-item -->
30      <li class="drawer-item">
31        <a href="#contacts" style="text-decoration:none;">Contact</a>
32      </li><!-- /.drawer-item -->
33    </ul><!-- /.drawer-list -->
34  </nav>
35  <span class="burger-musk" id="musk"></span>
36</div><!--drawer-->
37</header>
38
39<div class="contents">
40<div class="first">
41  <div class="company">
42    <p class="copy">デザインで人を笑顔にする会社<br>DIGSMILE INC.</p>
43    <h1 class="copy design">DESIGN<br>FOR<br>SMILE</h1>
44  </div>
45</div><!--first-->
46</div><!--contents-->
47
48<section class="about-wrapper">
49  <div class="about-img">
50   <div class="about">
51     <h2>ABOUT US</h2>
52     <p>DIGSMILEは、デザインで人を笑顔にする会社。<br>
53    なんでもない日常に少しのワクワクと遊び心を提供します。笑顔には世界を変える力がある、デザインには人を幸せにする力がある。毎日に幸せを感じて生きていきたい。<br>
54    DIGSMILEの社名にはそんな想いが込められています。
55    </p>
56    <div class="btn">
57      <a href="./about" class="link-btn" style="text-decoration:none;">view more</a>
58    </div>
59   </div><!--about-->
60  </div><!--about-img-->
61</section> <!--about-wrapper--> 
62
63<div class="contents-wrapper">
64  <div class="photos">
65  <div class="works">
66    <h2>WORKS</h2>
67    <img src="img/works-img.png">
68    <p>DIGSMILEの制作実績を紹介します。</p>
69    <div class="btn">
70      <a href="#" style="text-decoration:none;" class="link-btn">READ MORE</a>
71    </div><!--btn-->
72  </div><!--works-->
73  <div class="culture">
74    <h2>CULTURE</h2>
75    <img src="img/culture-img.png">
76    <p>DIGSMILEの社内文化について紹介します。</p>
77    <div class="btn">
78      <a href="#" style="text-decoration:none;" class="link-btn">READ MORE</a>
79    </div><!--btn-->
80  </div><!--culture-->
81  </div><!--photos-->
82</div><!--contents-wrapper--->
83
84<section class="latest-topics">
85  <h2>LATEST TOPICS</h2>
86  <div class="topics">
87   <div class="topic">
88    <p class="date">2020.02.01</p>
89    <p class="news">イベントレポート「VRクリエイター座談会 〜5Gの次に来るもの〜」</p>
90   </div>
91   <div class="topic">
92    <p class="date">2020.01.18</p>
93    <p class="news">プレスリリースのお知らせ DIGGIN’ RECORDS</p>
94   </div>
95   <div class="topic">
96    <p class="date">2020.01.01</p>
97    <p class="news">新年開けましておめでとうございます</p>
98   </div>
99  </div><!--topics-->
100  <div class="btn topic-btn">
101    <a href="#" style="text-decoration:none;" class="link-btn">READ MORE</a>
102  </div><!--btn-->
103</section><!--latest-topics-->
104
105<section class="contact-wrapper">
106<div class="contact-size">
107 <h2>CONTACT</h2>
108  <div class="recruit">
109   <p>制作の依頼、取材の依頼、IRや採用についての連絡・お問い合わせはコンタクトページから承っております。<br>
110  まずはお気軽にご連絡ください。担当者から改めて返信いたします。</p>
111   <img src="img/recruit-img.png">
112  </div><!--recruit-->
113  <div class="contact-btn">
114    <a href="#" style="text-decoration:none;" class="link-btn">READ MORE</a>
115  </div>
116</div><!--contact-size-->
117</section>
118
119<footer>
120  <p>©2018 DIGSMILE INC.</p>
121</footer>
122
123

CSS
1html {
2  height: 100%;
3}
4body {
5  height: 100%;
6  width: 100%;
7  padding: 0;
8  margin: 0;
9}
10/* ヘッダー */
11header {
12  height: 60px;
13  width: auto;
14  position: absolute;
15}
16
17.logo {
18  margin-left: 50px;
19}
20
21.contents {
22  height: 90%;
23}
24/*ファーストビュー*/
25.first {
26  height: 100%;
27  background-image: url(img/kv-img.png);
28  height: 90%;
29  width: 80%;
30  background-size: cover;
31  z-index: 5;
32  padding: 0;
33  margin: 0;
34}
35
36.first::after {
37  content: "";
38  display: block;
39  position: absolute;
40  top: 0;
41  right: 0;
42  background-color: #222;
43  width: 50%;
44  height: 90%;
45  z-index: -1;
46}
47
48/* チェックボックスは非表示に */
49.drawer-hidden {
50  display: none;
51}
52
53/* ハンバーガーアイコンの設置スペース */
54.drawer-open {
55  display: flex;
56  height: 60px;
57  width: 15%;
58  justify-content: center;
59  align-items: center;
60  position: relative;
61  z-index: 100;/* 重なり順を一番上に */
62  cursor: pointer;
63  float: right;
64  z-index: 100;
65  position: fixed;
66  top: 0px;
67  right: 0px;
68}
69
70/* 三本線のうち一番上の棒の位置調整 */
71.drawer-open span:before {
72  bottom: 8px;
73}
74
75/* 三本線のうち一番下の棒の位置調整 */
76.drawer-open span:after {
77  top: 8px;
78}
79
80/* アイコンがクリックされたら真ん中の線を透明にする */
81#drawer-check:checked ~ .drawer-open span {
82  background: rgba(255, 255, 255, 0);
83}
84
85/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
86#drawer-check:checked ~ .drawer-open span::before {
87  bottom: 0;
88  transform: rotate(45deg);
89}
90#drawer-check:checked ~ .drawer-open span::after {
91  top: 0;
92  transform: rotate(-45deg);
93}
94/*menuクリックでトーンを下げる*/
95#drawer-check:checked ~ .burger-musk{
96  opacity: 1;
97  transition: .8s;
98}
99
100/* メニューのデザイン*/
101.drawer-content {
102  width: 30%;
103  height: 100%;
104  position: fixed;
105  top: 0;
106  left: 100%;/* メニューを画面の外に飛ばす */
107  z-index: 99;
108  background: rgba(12, 12, 12, 0.911);
109  transition: .5s;
110  text-align: center;
111  padding-top: 100px;
112}
113
114.drawer-content ul {
115  list-style: none;
116}
117
118.drawer-content a {
119  color: white;
120}
121
122/* アイコンがクリックされたらメニューを表示 */
123#drawer-check:checked ~ .drawer-content {
124  left: 70%;/* メニューを画面に入れる */
125}
126/* チェックボックスは非表示に */
127.drawer-hidden {
128  display: none;
129}
130/*ハンバーガーメニュー*/
131.drawer-open span,
132.drawer-open span:before,
133.drawer-open span:after {
134  content: '';
135  display: block;
136  height: 3px;
137  width: 25px;
138  border-radius: 3px;
139  background: #fff;
140  transition: 0.5s;
141  position: absolute;
142}
143
144.drawer-item {
145  font-size: 30px;
146  padding-bottom: 40px;
147}
148
149.drawer {
150  display: block;
151}
152
153.burger-musk {
154  background-color: rgba(56, 56, 56, 0.603);
155  width: 100%;
156  height: 100%;
157  position: fixed;
158  padding: 0;
159  margin: 0;
160  top: 0;
161  opacity: 0
162}
163
164body.nonscroll {
165  overflow: hidden;
166}
167
168.menu {
169  display: block;
170  font-size: 1rem;
171  text-transform: uppercase;
172  color: #fff;
173  font-weight: bold;
174  float: right;
175  margin-left: 100px;
176  padding-top: 0;
177  font-family: 'arial black';
178}
179
180.copy {
181  display: flex;
182  justify-content: flex-end;
183  color: #fff;
184}
185
186.design {
187  font-family: 'arial black';
188  margin-top: 0;
189}
190
191.company {
192  z-index: 100;
193  padding-top: 180px;
194  margin-right: -100px;
195}
196
197.company h1 {
198  font-size: 50px;
199}
200
201/*about*/
202.about-wrapper {
203  height: auto;
204  position: relative;
205  width: 70%;
206  margin: 0 auto;
207  bottom: 0;
208}
209
210.about-img {
211  background-image: url(img/about-img.png);
212  background-size: cover;
213  padding: 110px 0 110px 50px;
214  background-position: center;
215  margin-top: 200px;
216  bottom: 0;
217}
218
219.about {
220  background-color: #fff;
221  margin-top: 100px;
222  display: block;
223  width: 40%;
224  height: 50%;
225  padding: 30px 60px;
226  line-height: 30px;
227}
228
229.about p {
230  margin-top: 30px;
231  font-size: 15px;
232}
233
234.about a {
235  margin-bottom: 50px;
236}
237
238/*リンクボタン*/
239.link-btn {
240  color: #fff;
241  background-color: #222;
242  padding: 15px 50px;
243  font-size: 15px;
244}
245.btn {
246  margin: 30px 0 30px 0;
247}
248
249/*コンテンツ*/
250.contents-wrapper {
251  position: relative;
252}
253
254.contents-wrapper::after {
255  content: "";
256  display: block;
257  position: absolute;
258  right: 0;
259  background-color: rgba(219, 219, 219, 0.76);
260  width: 100%;
261  height: 200%;
262  z-index: -1;
263  top: -200px;
264  left: 0;
265}
266
267.photos {
268  display: flex;
269  justify-content: space-between;
270  margin: 0 auto;
271  width: 70%;
272  margin-top: 120px;
273}
274
275.contents-wrapper img {
276  width: 100%;
277}
278
279.contents-wrapper h2,.contact-wrapper h2,.latest-topics h2,.about h2,
280.works h2,.culture h2{
281  font-family: 'arial black';
282  letter-spacing: 2px;
283  left: 0;
284
285}
286.contents-btn {
287  margin: 50px 0 50px 0;
288}
289
290/*LATEST TOPICS*/
291.latest-topics {
292  background-color: #fff;
293  z-index: 10;
294}
295
296.latest-size {
297  height: 400px;
298  width: 70%;
299  margin: 0 auto;
300  margin-top: 140px;
301}
302
303.latest-size h2 {
304  display: inline-block;
305  margin-top: 30px;
306}
307
308.topics {
309  margin-left: 500px;
310}
311
312.topic-btn {
313  display: flex;
314  justify-content: flex-end;
315}
316
317.date {
318  font-size: 10px;
319  color:rgb(161, 161, 161)
320}
321
322.news {
323  display: block;
324  border-bottom: solid 1px  rgba(136, 134, 134, 0.76);
325}
326
327/*コンタクト*/
328.contact-wrapper {
329  width: 100%;
330  background-color: rgba(219, 219, 219, 0.76);
331  height: 650px;
332  margin: 0;
333  overflow: hidden;
334}
335.contact-size {
336  width: 70%;
337  margin: 0 auto;
338  height: 50%;
339}
340
341.recruit {
342  display: flex;
343  justify-content: space-between;
344}
345
346.contact-size h2 {
347  display: inline-block;
348  margin-top: 150px;
349  height: 100px;
350}
351
352.recruit p {
353  display: block;
354  width: 40%;
355}
356
357.recruit img {
358  margin-top: -100px;
359  padding-bottom: 90px;
360}
361
362.contact-btn {
363  margin-top: -140px;
364}
365
366/*フッター*/
367footer {
368  height: 60px;
369  background-color: rgba(92, 91, 91, 0.925);
370  margin-top: 0;
371}
372footer p {
373  line-height: 60px;
374  color: #fff;
375  text-align: center;
376}