I'm developing a website, but a small bug has occurred that I can not solve, there is a search form in the main div, and a menu that stays fixed, above any element on the page. However, when I open the menu, the form input is above the menu, as if it had a z-index greater than the menu, what causes it, and how can I solve this problem?
//MenuOpenClose
function mainMenu(){
var maskMenu = document.getElementById("mask-menu");
var openMenuBtn = document.getElementById("main-menu-open");
var closeMenuBtn = document.getElementById("main-menu-close");
var openMenu = function(){
document.documentElement.classList.add("menu-active");
maskMenu.style.display = "block";
setTimeout(function(){
maskMenu.style.backgroundColor = "rgba(0,0,0,.6)";
},50);
}
var closeMenu = function(){
maskMenu.style.backgroundColor = "rgba(0,0,0,0)";
document.documentElement.classList.remove("menu-active");
setTimeout(function(){
maskMenu.style.display = "none";
},600);
}
maskMenu.style.display = "none";
openMenuBtn.onclick = function(){openMenu()};
closeMenuBtn.onclick = function(){closeMenu()};
maskMenu.onclick = function(){closeMenu()};
}
mainMenu();
//ScrollDetect
function detectaRolagem(){
var menuPrincipal = document.getElementById("menu-principal");
if(document.documentElement.scrollTop >= 15){
menuPrincipal.classList.add("offTop");
}else{
menuPrincipal.classList.remove("offTop");
};
}detectaRolagem();
window.onscroll = function(){detectaRolagem()}
document.onload = function(){detectaRolagem()}
//PrincipalContent
function conteudoPrincipal(){
var principal = document.getElementById("principal");
principal.style.height = window.innerHeight + "px";
}conteudoPrincipal();
window.onresize = function(){conteudoPrincipal()};
document.onload = function(){conteudoPrincipal()}/* RESET.css */
*{
color:inherit;
font-family:inherit;
background-color:inherit;
margin:0;
padding:0;
text-decoration:none;
border:none;
font-size:inherit;
outline:none;
box-sizing:border-box;
list-style:none;
}
.sr-only {
position:absolute;
width:1px;
height:1px;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
}
html,body{
height:100%;
font-family:"Open Sans", sans-serif;
}
img{
width:100%;
}
/* Navbar */
nav{
width:100%;
position:fixed;
display:flex;
align-items:center;
background-color:rgba(255,255,255,0);
border-bottom:1px solid transparent;
transition:all .3s ease-in-out;
padding:0 3.125%;
}
nav.offTop{
background-color:rgba(255,255,255,1);
}
nav > div{
padding:12px;
display:flex;
align-items:center;
position:relative;
justify-content:space-between;
width:100%;
}
.social-icons{
display:flex;
align-items:center;
justify-content:space-around;
}
.social-icons li{
margin:0 4px;
padding:4px;
}
#menu-links{
position:fixed;
top:0;
left:-100%;
display:flex;
flex-direction:column;
width:80%;
height:100%;
background-color:rgba(255,255,255,1);
padding:16px;
transition:all .6s ease-in-out;
z-index:20;
}
#mask-menu{
transition:all .6s ease-in-out;
background-color:rgba(0,0,0,0);
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:10;
}
html.menu-active #menu-links{
left:0;
}
.menu-buttons button:hover{
cursor:pointer;
}
#menu-links .menu-buttons{
align-self:flex-end;
}
#menu-links form fieldset{
display:flex;
align-items:center;
position:relative;
}
#menu-links form fieldset input{
padding:6px 12px;
}
#menu-links form fieldset button{
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
}
#menu-links form fieldset button span{
display:flex;
align-items:center;
}
#menu-links li{
padding:6px 0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:stretch;
}
.menu-outtop{
border-bottom:1px solid #ccc;
background-color:rgba(255,255,255,1);
}
#principal{
padding:64px 3.125%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-transform:uppercase;
}
#principal h2{
font-size:1.3em;
margin:0 0 12px;
color:#111439;
}
#principal form fieldset{
display:flex;
position:relative;
align-items:center;
}
#principal form input{
border: 1px solid #a0a9b6;
padding:6px 12px;
width:100%;
position:relative;
}
#principal form button{
position:absolute;
}
#footer{
display:flex;
align-items:center;
justify-content:center;
padding:12px 3.125% 32px;
text-transform:uppercase;
font-weight:700;
}<body>
<nav id="menu-principal">
<span id="mask-menu"></span>
<div>
<ul class="social-icons">
<li><a href=""><span class="sr-only">Facebook</span><span><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#194880" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" /></svg></span></a></li>
<li><a href=""><span class="sr-only">Twitter</span><span><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#009ec6" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z" /></svg></span></a></li>
<li><a href=""><span class="sr-only">Instagram</span><span><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#285fa8" d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" /></svg></span></a></li>
<li><a href=""><span class="sr-only">Youtube</span><span><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#e42c27" d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z" /></svg></span></a></li>
</ul>
<div class="menu-buttons">
<button id="main-menu-open"><span class="sr-only">Abrir menu</span><span><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg></span></button>
</div>
<ul id="menu-links">
<div class="menu-buttons">
<button id="main-menu-close"><span class="sr-only">Fechar menu</span><span><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg></span></button>
</div>
<li class="search-bar">
<form method="post" action="">
<fieldset>
<input type="text" name="" placeholder="O que você procura?">
<button type="submit"><span class="sr-only">Pesquisar</span><span><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg></span></button>
</fieldset>
</form>
</li>
<li><a href="index.php">Página inicial</a></li>
<li><a href="sobre.php">Sobre</a></li>
<li><a href="contato.php">Contato</a></li>
</ul>
</div>
</nav>
<div id="main-content">
<div id="principal" class="search-form">
<h2>Qual o seu problema?</h2>
<form method="post" action="">
<fieldset>
<input type="text" name="" placeholder="Ex: Assinatura de E-mail">
<button type="submit"><span class="sr-only">Pesquisar</span><span><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg></span></button>
</fieldset>
</form>
<p><a href="#" id="scroll-newest-videos">Talvez a solução esteja aqui!</a></p>
</div>
</div>
</body>
</html>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">