我在屏幕中间有一个文本框,但是当我点击它时,没有任何反应。我认为这是CSS Z-Index的问题。如何诊断和解决这个问题?
JsFiddle
我的问题是我无法实际点击输入框。我尝试了调整布局,但似乎无法使输入框“可点击”。
请问有人能解释如何解决这个问题吗?
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>
请问有人能解释如何解决这个问题吗?