我在屏幕中间有一个文本框,但是当我点击它时,没有记录任何点击。我认为这是一个 CSS Z-Index 问题。我该如何诊断和解决这个问题?
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>
我的问题是我实际上无法点击输入。我试过尝试布局,但我似乎无法让输入“可点击”。
有人可以解释一下如何解决这个问题吗?
最佳答案
当在其他元素之上/之后将实际元素分层时,应使用 Z-index,并且不应真正为输入赋予负值 - 特别是当您的 body 元素(我相信)将默认为 0 时。
这意味着设置一个小于 0 的值(即负值),意味着您的元素将被放置在主体后面。
因此,如果这是一个输入元素,您实际上不能点击它,因为“您将点击正文而不是”,而不是实际的输入。
在极少数情况下,您会在输入上放置一个 z-index(大多数情况下您真的不需要声明一个),而不是设置一个负值,而是尝试使用一个较低的正值。这样它应该在 body 之上(除非这已经被改变)。
这是一个简短的例子:
body {
background: tomato;
}
input {
z-index: -2;
position: relative;
}
<input type="text" placeholder="i'm unclickable!" />
通过使用正值(0 或更大),您可以选择文本框
body{
background:tomato;
}
input{
position:relative;
z-index:0;
}
<input type="text" placeholder="i'm now clickable!"/>
在上面的示例中,您最终可以完全删除 z-index。
有关z-index
属性的更多信息,请参阅其documentation
JsFiddle Solution
关于css - 无法单击具有负 z-index 的文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6338857/