Form field above all elements on page

Asked

Viewed 61 times

0

I am developing a site, but there was a small bug that I can not solve, there is a search form in the main div, and a menu that is fixed, above any element on the page. However, when opening the menu, the form input is above the menu, as if it had a z-index higher than the menu, what causes, 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">

html css
  • 1

    If you put an https://answall.com/help/mcve. you have a better chance of being helped Murilo

  • I tweaked all the CSS properties, and the whole JS is for the Menu, so I put everything

  • 1

    Murilo just put it on nav#menu-principal one z-index:1. Forehead there to see

  • put as answer man, but why it occurs ?

  • 1

    Murilo I will not post as because I do not know why it occurs, I never had enough interest for it to deepen. But I hope someone knows and can answer you

2 answers

1


What happens is that sometimes we structure the css and we don’t care about the hierarchy in the DOM, elements such as the inputs, tend to overwrite everything that is not set with proper z-index and or position Absolute or relative, even more so when those elements are above them, so a simple solution for your case was to transfer the side menu to the end of the code...

	//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>
		</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>
<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>
</body>
</html>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">

0

You can use negative z-index to solve this problem. In your case it would:

HTML

   <input type="text" class="exemplo" name="" placeholder="Ex: Assinatura de E-mail">

CSS

   .exemplo{
   z-index:-99;
   }

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.