How to properly use z-index in this case? - html

Question

I need my h1 "Мышонок" to remain fully visible when I click hamburger menu.
When I click the menu, my white h1 becomes behind it, and I can't figure out how to make it 100% visible.
I tried to mess with z-index but I was unfortunate. Noob here. Please help
#import url("https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&display=swap");
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: "Oswald", sans-serif;
}
img {
width: 100%;
height: auto;
}
/* Utility */
.container {
margin: 0 auto;
max-width: 1160px;
padding: 0 20px;
overflow: hidden;
}
.overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.hidden {
display: none;
}
/* Home */
.showcase {
position: relative;
height: 100vh;
background-image: url(../img/homebg/bg1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation: slide 18s infinite;
transition: 100ms ease-in-out;
width: 100%;
}
.showcase h1 {
font-size: 3.5rem;
font-weight: 500;
color: #fff;
padding-top: 40px;
text-transform: uppercase;
z-index: 1001;
}
#keyframes slide {
0% {
background-image: url(../img/homebg/bg1.jpg);
}
20% {
background-image: url(../img/homebg/bg2.jpg);
}
40% {
background-image: url(../img/homebg/bg3.jpg);
}
60% {
background-image: url(../img/homebg/bg4.jpg);
}
80% {
background-image: url(../img/homebg/bg5.jpg);
}
100% {
background-image: url(../img/homebg/bg1.jpg);
}
}
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1001;
width: 100%;
height: 100%;
}
.menu-wrap .toggler {
position: absolute;
top: 55px;
right: 280px;
z-index: 1002;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 55px;
right: 270px;
z-index: 1001;
width: 70px;
height: 60px;
padding: 1rem;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Icon */
.menu-wrap .hamburger>div {
position: relative;
flex: none;
width: 100%;
height: 4px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
.menu-wrap .hamburger>div::before,
.menu-wrap .hamburger>div::after {
content: "";
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 4px;
background: inherit;
}
.menu-wrap .hamburger>div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked+.hamburger>div {
transform: rotate(135deg);
}
.menu-wrap .toggler:checked+.hamburger>div:before,
.menu-wrap .toggler:checked+.hamburger>div:after {
top: 0;
transform: rotate(90deg);
}
.menu-wrap .toggler:checked:hover+.hamburger>div {
transform: rotate(225deg);
}
/* Show Menu */
.menu-wrap .toggler:checked~.menu {
visibility: visible;
}
.menu-wrap .toggler:checked~.menu>div {
transform: scale(1);
transition-duration: 0.75;
}
.menu-wrap .toggler:checked~.menu>div>div {
opacity: 1;
transition: opacity 0.1s ease 0.1s;
}
/* Menu overlay */
.menu-wrap .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .menu>div {
background: rgba(0, 0, 0, 0.5);
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
border-radius: 50%;
}
.menu-wrap .menu>div>div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
}
.menu-wrap .menu>div>div>ul>li {
list-style: none;
font-size: 3rem;
padding: 1rem;
}
.menu-wrap .menu>div>div>ul>li>a {
color: #fff;
text-decoration: none;
}
<div class="hidden">
<img src="img/homebg/bg2.jpg" />
<img src="img/homebg/bg3.jpg" />
<img src="img/homebg/bg4.jpg" />
<img src="img/homebg/bg5.jpg" />
</div>
<!-- Home -->
<div class="showcase">
<div class="overlay">
<div class="container">
<h1>Мышонок</h1>
<!-- Hamburger -->
<div class="menu-wrap">
<input type="checkbox" class="toggler" />
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li>Personal</li>
<li>Men</li>
<li>Women</li>
<li>Video</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I don't know what more details to add, stackoverflow, I believe I described it as much as I could

Answer 1

Here is What I was able to come up with to be able to solve your issue: https://jsfiddle.net/L7ac6j3v/8/
One of the main issues I think you were facing was over complicating it for yourself by using crazy z-index values like 999 to 1005 etc, you'll see I have removed or replaced alot of the values with easy to work with values like 1,2 etc
Another main issue I was seeing was your use of the position style and not having position: absolute when trying to work with the z-index of an element
As a side note a way that I like to test if elements are positioned correctly is to use cursor: pointer and pointer-events
Hope this helps :)