请问我的输入框(input)为什么没法输入字符

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>homework1</title>
<link rel="stylesheet" href="homework1.css">
</head>
<body>
<div class="container">
<!-- 顶部 -->
<div class="header">
<div class="logo">
<img src="images2/logo.png" alt="logo.png">
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="banner">
<div class="bgp">
<img src="images2/banner3.jpg" alt="banner3.jpg">
</div>
<!-- 遮罩层 -->
<div class="cover"></div>
           <!-- 用户信息输入区 -->
<div class="over_cover">
<form >
<div>
<input type="text" placeholder="Your Name" class="inf">
<div>
<input type="text" placeholder="Your Phone" class="inf">
</div>
<div>
<input type="Email" placeholder="Your Email" class="inf">
</div>
<div>
<textarea placeholder="With Your Comment Here" class="comment" ></textarea>
</div>
</form>
</div>
</div>
<div class="about"></div>
<div class="gallery"></div>
<div class="footer"></div>
</div>
</body>
</html>

css:

*{
	margin: 0px;
	padding: 0px;
}
.container{
	width: 1920px;
	height: 3260px;
	background-color: lightblue;
}
.clear{
	clear: both;
}
.container .header{
	width: 100%;
	height: 80px;
	background-color: #07cbc9;
	position: fixed;
	top:0px;
	z-index: 5;
}
.container .header .logo{
	float:left;
}
.container .header .logo img{
	line-height: 80px;
	padding-top:17px;
	padding-left: 100px;
}
.container .header .nav ul{
	float:right;
	margin: 0px;
	margin-right: 100px;
}
.container .header .nav ul li{
	float:left;
	list-style: none;
	width: 80px;
	height: 80px;
	line-height: 80px;
	text-align: center;
	padding:0 20px;
    color:#ffffff;
    font-size: 20px;
    font-weight: bolder;
    font-family: " Microsoft YaHei UI"
}
.container .banner{
	margin-top: 80px;
	z-index: 0;
}
.container .banner .bgp{
	width:1920px;
	height: 1200px;
}
.container .banner .bgp img{
	width:100%;
	height: 1200px;
}
.container .banner .cover{
	width:100%;
	height: 1200px;
	position: absolute;
	top:80px;
	left:0;
	background-color: #000000;
	z-index: 1;
	opacity: 0.5;
}
.container .banner .over_cover{
	height:320px;
	width: 520px;
	position: absolute;
	top:300px;
	margin-left: 50%;
	left: -250px;
}
.container .banner .over_cover .inf{
	background:none;
	width: 500px;
	height: 48px;
	margin-bottom: 20px;
	padding:10px 20px;
	border:2px solid #dce4e6;
}
.container .banner .over_cover .comment{
	background:none;
	width: 500px;
	height: 144px;
	padding:10px 20px;
	margin-bottom: 20px;
	border:2px solid #dce4e6;
}

ggplot2 2018-09-17

源自：项目：网页布局案例 2-9 作业题

收起

4回答

guly 回答被采纳获得+3积分 2018-09-18 15:21:56

你好，解决遮罩成问题建议修改以下css样式

.container .banner .cover{  
 /*width:100%;*/   
/*height: 1200px;*/   
/*position: absolute;*/  
/*top:80px;*/   
/*left:0;*/   
/*background-color: #000000;*/ 
/*z-index: 1;*/ 
/*opacity: 0.5;*/
}

改为：

.container .banner .cover{
background-color: #000; 
opacity: 0.4;   
z-index: 1;  
position: absolute; 
top: 80px;  
width: 100%;  
height: 600px;
}

.container .banner .over_cover{  
/*height:320px;*/  
/*width: 520px;*/  
/*position: absolute;*/  
/*top:300px;*/  
/*margin-left: 50%;*/ 
/*left: -250px;*/
}

改为：

.container .banner .over_cover{   
z-index: 2;
width: 500px;
position: absolute; 
top: 350px;   
margin-top:-150px; 
right: 50%; 
margin-right: -250px; 
text-align: center;
}

如果解决您的问题请采纳，祝学习愉快！

收起回答

ggplot2 提问者 #1

嗯，现在可以输入了，谢谢。可是我的之前的写法为什么不行，调整了一下后就可以了呢？不太清楚_(:з」∠)_

2018-09-18 18:25:00
ggplot2 提问者 #2

因为遮罩层覆盖了表单？

2018-09-18 18:26:29
好帮手慕查理回复提问者 ggplot2 #3

您好，是因为遮罩层的原因，相当于在input框的上层又遮上了一层，那么点击的时候是在遮罩层上。调整的代码中z-index将input框放在了遮罩层的上层，因此可以进行点击。祝学习愉快！

2018-09-19 14:29:24