z-indexの重なり順が制御できない

実現したいこと

ハンバーガーメニューを展開した際のz-indexの重なり順を以下のようにしたいです。

1(最前面): メニュー項目<nav>～</nav>、trigger
2:nav.global-nav
3:その他コンテンツ

発生している問題・分からないこと

ハンバーガーメニューを展開した際のz-indexの重なり順を「実現したいこと」に記載した順番にしたいのですが、z-indexの値を 1 > 2 > 3の優先順位にしても.triggerが前面に表示されません。

該当のソースコード

html
1<body>
2<div class="wrapper">
3<header>
4		<nav class="global-nav">
5			<div class="fixed-trigger">
6				<div class="trigger">
7					<p class="menu-trigger">
8						<span></span>
9						<span></span>
10					</p>
11					<span>MENU</span>
12				</div>
13			</div>
14		</nav>
15	</header>
16</div>
17
18<!-- コンテンツ内容をここに記述 -->
19
20<!-- // -->
21
22<div class="hamburger-overlay">
23	<div class="hamburger-wrapper">
24		<nav class="hamburger-global">
25			<ul>
26				<li>メニュー項目1</li>
27				<li>メニュー項目2</li>
28				<li>メニュー項目3</li>
29			</ul>
30		</nav>
31	</div>
32</div>
33</body>

scss
1header {
2	position: relative;
3	width: 100%;
4	margin: 0 auto;
5  
6	.global-nav {
7		position: fixed;
8		right: 0;
9		top: 0;
10		width: clamp(90px, calc(60px + 3.125vw), 120px);
11		height: 100vh;
12		background-color: #3CD7BC;
13		z-index: 5;
14  
15		.fixed-trigger {
16			display: flex;
17			flex-direction: column;
18			align-items: center;
19			position: fixed;
20			top: 40px;
21			right: 0;
22			z-index: 1100;
23		}
24  
25		.trigger {
26			display: flex;
27			flex-direction: column;
28			align-items: center;
29			margin-bottom: 25px;
30			cursor: pointer;
31			z-index: 1100;
32  
33			.menu-trigger,
34			.menu-trigger span {
35				display: inline-block;
36				transition: all 0.4s;
37			}
38  
39			.menu-trigger {
40				position: relative;
41				width: 50px;
42				height: 20px;
43				margin-bottom: 15px;
44			}
45  
46			span {
47				color: #FFF;
48				font-size: 1.5rem;
49				font-weight: 700;
50			}
51  
52			.menu-trigger span {
53				position: absolute;
54				left: 0;
55				display: block;
56				width: 100%;
57				height: 3px;
58				background: #FFF;
59				transition: 0.3s ease;
60			}
61  
62			.menu-trigger span:nth-of-type(1) {
63				top: 0;
64			}
65  
66			.menu-trigger span:nth-of-type(2) {
67				bottom: 0;
68			}
69  
70			.menu-trigger.active span:nth-of-type(1) {
71				transform: rotate(45deg) translate(4px, 4px);
72			}
73  
74			.menu-trigger.active span:nth-of-type(2) {
75				transform: rotate(-45deg) translate(8px, -8px);
76			}
77		}
78	}
79}
80
81.hamburger-overlay {
82	position: fixed;
83	top: 0;
84	left: 0;
85	width: 100vw;
86	height: 100%;
87	background: rgba(122, 122, 122, 0.9);
88	z-index: 1;
89	opacity: 0;
90	visibility: hidden;
91	transition: opacity 0.2s ease-out;
92
93	&.active{
94		opacity: 1;
95		visibility: visible;
96	}
97}
98  
99.hamburger-global {
100	display: none;
101}
102  
103.hamburger-overlay.active, .hamburger-global.active {
104	display: block;
105}

jQuery
1$('.trigger').click(function() {
2	$('.menu-trigger').toggleClass('active');
3	if ($('.hamburger-overlay').hasClass('active')) {
4		$('.hamburger-overlay').removeClass('active');
5		setTimeout(function() {
6			$('.hamburger-global').removeClass('active');
7		}, 500);
8	} else {
9		$('.hamburger-overlay').addClass('active');
10		setTimeout(function() {
11			$('.hamburger-global').addClass('active');
12		}, 100);
13	}
14});