z-indexとpositionについて

以下のハンバーガーメニューで、ボタンをクリックすると黒背景が広がり、ボタンが背景よりも上に来るようになっています。
これは.hamburger{z-index:1;}によるものですが、css27行目のabsolute指定を消去すると適用されず、ボタンは黒背景の後ろに来てしまいます。なぜこのようなことが起こるのでしょうか。
https://codepen.io/gtrtretyrey/pen/QWbWEaa

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
8  <link rel="stylesheet" href="style.css">
9  <title>Hamburger Menu Overlay</title>
10</head>
11<body>
12  <div class="menu-wrap">
13    <input type="checkbox" class="toggler">
14    <div class="hamburger"><div></div></div>
15    <div class="menu">
16      <div>
17        <div>
18  
19        </div>
20      </div>
21    </div>
22  </div>
23</body>
24</html>

CSS
1:root {
2  --primary-color: rgba(13, 110, 139, 0.75);
3  --secondary-color: rgba(229, 148, 0 , 0.9);
4  --overlay-color: rgba(24, 39, 51 , 0.85);
5  --menu-speed: 0.75s;
6}
7
8/* ハンバーガー */
9.menu-wrap{
10  position: fixed;
11  top:0;
12  left:0;
13}
14
15.toggler{
16  position: absolute;
17  top:0;
18  left:0;
19  width:60px;
20  height:60px;
21  z-index: 2;
22  opacity: 0;
23  cursor: pointer;
24}
25
26.hamburger{
27  position: absolute;
28  top: 0;
29  left: 0;
30  display: flex;
31  align-items: center;
32  background: rgba(13, 110, 139, 0.75);
33  padding: 1rem;
34  z-index:1;
35  width: 60px;
36  height:60px;
37}
38
39.hamburger > div{
40  position: relative;
41  background: white;
42  height:2px;
43  width:100%;
44  transition: all 0.4s;
45}
46
47.hamburger > div::before,
48.hamburger > div::after{
49  content: '';
50  position: absolute;
51  top:-10px;
52  height: 2px;
53  background: inherit;
54  width:100%
55}
56
57.hamburger > div::after{
58  top:10px;
59}
60
61.toggler:checked ~.hamburger > div{
62  transform: rotate(135deg);
63}
64
65.toggler:checked ~.hamburger > div::before,
66.toggler:checked ~.hamburger > div::after{
67  top:0;
68  transform: rotate(90deg);
69}
70
71.toggler:checked:hover ~.hamburger > div{
72  transform: rotate(225deg);
73}
74
75
76
77/* showmenu */
78.toggler:checked~.menu>div{
79  transform: scale(1);
80  transition: 1s;
81}
82
83.toggler:checked~.menu>div>div{
84  opacity: 1;
85  transition: all 0.3s 0.5s;
86}
87
88.menu{
89  position: fixed;
90  top: 0;
91  left: 0;
92  width: 100%;
93  height: 100%;
94  display: flex;
95  align-items: center;
96  justify-content: center;
97}
98
99.menu>div{
100  background-color: var(--overlay-color);
101  border-radius: 50%;
102  width:200vw;
103  height:200vw;
104
105  display: flex;
106  flex: none;
107  align-items: center;
108  justify-content: center;
109
110  transform: scale(0);
111}
112
113.menu>div>div{
114  opacity: 0;
115  display: flex;
116}