I am currently facing an issue with a textbox in the center of my screen - when I click on it, no actions are registered. This leads me to believe that there may be a CSS Z-Index problem at play here. How can I troubleshoot and correct this issue effectively?
div#container {
z-index:-1;
position:relative;
height:300px;
width:300px;
margin:0 auto;
background-color: #E9E9E9;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
padding-top: 8px;
}
h2 {
text-align:center;
}
#container input[type="submit"] {
position:absolute;
bottom:0;
left:0;
height:50px;
width:100%;
}
#container input[type="text"], #container input[type="password"] {
position:absolute;
outline:0;
border:none;
padding:0;
margin:0;
height:50px;
top:50px;
width:100%;
}
#container input[type="password"] {
top:150px;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:2;
height:100%;
width:100%;
background:gray;
text-align:center;
line-height:300px;
box-shadow:inset 0 120px 0 0 darkgray, inset 0 122px 0 0 gray, inset 0 124px 0 0 darkgray, inset 0 -120px 0 0 darkgray, inset 0 -122px 0 0 gray, inset 0 -124px 0 0 darkgray;
}
body:hover .overlay {
display:none;
}<div id="container">
<h2>LOGIN</h2>
<input type="text" id="name" placeholder="Enter your Name" />
<input type="password" id="password" placeholder="Enter your Password" />
<input type="submit" id="submit" value="Login" />
<div class="overlay">LOGIN HERE</div>
</div>The main issue lies in the fact that the inputs are not clickable despite adjustments made to the layout. I would greatly appreciate some guidance on how to tackle this challenge effectively.
Could someone provide insights or solutions on resolving this peculiar issue?