为什么我文本框的文字会知道居中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页</title>
<link rel="stylesheet" type="text/css" href="CareerWeb.css">
<script type="text/javascript" href="CareerWeb.js"></script>
</head>
<body>
<div class="top">
<div class="logo">
<a href="#"><img src="../images/logo.png"></a>
</div>
<div class="topul">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="banner">
<div class="banner-img">
<img src="../images/banner3.jpg"> 
</div>
<div class="form">
<form>
<input type="text" class="onetext" name="\" value="your name" ><br>
<input type="text" class="twotext" name=" " value="your iphone"><br>
<input type="text" class="threetext" name="" value="your email"><br>
<input type="text" class="fourtext" name="" value="write your comment here">
</form>

</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

*{
	margin: 0px;
	padding: 0px;
}
.top{
	width:100%;
	height:80px;
	background:#07cbc9;
	position: fixed;
}
.top .logo {
	float: left;
	/*position: relative;*/
	margin-left: 100px;
	margin-top: 15px;
}
.top .topul{
	float: right;
	/*position: relative;*/
	margin-right: 80px;	
}
.top .topul ul li{
	float: left;
	list-style: none;
	margin-left: 30px;
	line-height: 80px;
	height: 80px;

}
a{
	text-decoration:none;
	color:#ffffff;
}

.top .topul ul li:hover{
	background: #300;
}

.conten{
	height: 803.73px;
	width:100%;
}
.content .banner .banner-img{
	float: left;
	margin-top: 80px;
	
}
.content .banner .form{
	opacity: 0.4;
	position: absolute;
	top: 220px;
	left: 640px;
	
}
.content .banner .form input{
	width: 400px;
	height: 40px;
	margin-top: 20px;
}
.content .banner .form .fourtext{
	height: 150px;
	padding-top: 0px; //强行将文本的value放在top ，无效
}

cccca 2019-09-15

源自：前端油画商城案例 4-3 项目作业

收起

3回答

好帮手慕小班 2019-09-19 10:23:33

同学你好，非常抱歉这里没有理解同学的意思，这里出现同学说的"表单下拉时候，能覆盖页眉区，而不是隐藏在页眉区下面"，原因如下-->

1、在top中使用了position: fixed;是的top的定位始终处于浏览器窗口的定位的位置。

2、top定位在了窗口的上方，当页面滑动，页面里top的这一区域有两个内容，它们是重叠的，默认它们会按照页面的加载顺序展示，将input框的内容展示在页眉的上面，那此时我们就需要让页眉的top区域展示在最上层，我们就可以使用z-index属性来设置元素的堆叠顺序，例如：

如上所示，top区域如果重叠，就会展示在页面最上层，不会出现同学所说的"能覆盖页眉区，而不是隐藏在页眉区下面"。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

好帮手慕小班 2019-09-18 16:07:51

同学你好，同学说的是如下的情况吧

出现这样的原因是因为在top的css设置中：

fixed-->生成绝对定位的元素，相对于浏览器窗口进行定位,这样定位就是说无论下面的页面如何滑动，这个的定位是相对与窗口进行的定位，不会改变页面的整体布局呐，比如在https://class.imooc.com/lesson/1048#mid=25235 这个编程练习中，我们就考查了对position:fixed的使用。

如果去掉这个fixed，改为relative，对应在content的内容定位中可能出现错位，此时需要清除top中的浮动的影响，比如 clean:both; ，添加top的relative定位属性以及.content .banner .form input中margin-top: 20px;等内容造成的错位，同学可以根据这些因素来调整哦。

并且查看代码，css属性中还有一个class名写错了哟。

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

收起回答

提问者 cccca #1

视频是要求页眉区随滚动条而固定啊。不添加fixed，怎么固定啊？添加其他有用吗？

2019-09-18 22:00:46
提问者 cccca #2

你看一下视频效果的页眉区，随着滚动，页面区始终出现在顶头。

2019-09-18 22:01:39

好帮手慕珊 2019-09-16 11:08:52

同学，你好！运行你的代码，并没有发现文本框内容居中呀，建议将你的运行效果截图贴出来。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

提问者 cccca #1

和你运行的一样啊，我就是想把最后一个文本框的内容放到离边框最近，我设了padding-top：0，但没反应

2019-09-17 16:47:24
好帮手慕小班回复提问者 cccca #2

同学你好，input框的占位符(输入内容)默认在垂直居中的位置显示，同学这里可以使用<textarea></textarea>来定义个这个文本框，例如：<textarea class="text" rows="5" cols="55" name="your comment" placeholder="Write Your Comment Here"></textarea> 如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

2019-09-17 19:06:09
提问者 cccca #3

哦，还有，为什么我的表单下拉时候，能覆盖页眉区，而不是隐藏在页眉区下面，反而能随下拉，在页眉区显示

2019-09-17 21:50:02