.about区域位置问题
老师，我将.about区域设置为红色，top属性设置为850px，但是红色区域没有出现在banner的下面，出现在上面了，假如加入一个相对定位，就可以出现在下面，请问这个是为什么喃？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4-3项目</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<div class="head">
<div class="logo">
<img src="images/logo.png">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABAOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="banner">
<img src="images/banner3.jpg" class="banner-img">
<div class="message">
<form action="" method="post">
<ul>
<li><input type="text" name="" value="your Name"></li>
<li><input type="text" name="" value="your Phone"></li>
<li><input type="text" name="" value="your Email"></li>
<li><textarea>Write You Comment Here</textarea>
</li>
<li><input type="submit" value="SEND MESSAGE" name=""></li>
</ul>
</form>
</div>
</div>
<div class="about">
<div class="about-top">
<div class="about-top-head">
<h3>ABOUT</h3>
<p class="p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="about-top-left">
<h4>A WORD ABOUT US</h4>
<p class="p1">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p>
<p class="p2">EXPLORE</p>
</div>
<div class="abot-top-center">
<img src="images/bb3.jpg">
</div>
<div class="about-top-right">
<h5>70000</h5>
<p>Students</p>
<h5>600</h5>
<p>Faculty</p>
</div>
</div>
<div class="about-down">
</div>
</div>
<div class="GALLERY"></div>
</div>
<div class="foot">
</div>
</body>
</html>
++++++++++++++++
* {
margin: 0px;
padding: 0px;
list-style-type: none;
font-family: Microsoft YaHei UI;
/*消除浏览器的默认距离*/
}
.head {
width: 100%;
/*设置与浏览器宽度一致*/
background: #07cbc9;
height: 50px;
position: fixed;
top: 0px;
z-index: 100;
/*值越大显示就在上面*/
}
/*设置logo区域*/
.head .logo {
margin-left: 50px;
height: 50px;
line-height: 50px;
}
/*设置菜单区域*/
.head .logo .menu {
float: right;
margin-right: 50px;
}
/*设置菜单中的选项*/
.head .logo .menu ul li {
float: left;
margin-right: 30px;
list-style: none;
height: 50px;
line-height: 50px;
color: white;
}
.head .logo .menu ul li:hover {
background: #000;
}
/*设置content区域*/
.content {
width: 100%;
margin-top: 50px;
}
/*设置banner区域*/
.content .banner {
width: 100%;
position: relative;
}
/*/*设置banner区域图片*/
.content .banner .banner-img {
width: 100%;
height: 800px;
opacity: 0.4;
float: left;
}
/*设置banner区域中的输入信息div，
需要使用position中的绝对定位
否则输入框会被浮动的div挤出.message的div，
输入框会在图片的下方*/
.content .banner .message {
z-index: 2;
width: 400px;
height: 350px;
position: absolute;
/*(800-350)/2=225
即：message距离图片顶部的距离=
（图片的高度-message的高度）/2=225
通过此设置，实现上下居中
请问老师，这样计算对吗？*/
margin-top: 225px;
right: 50%;
/*50%代表message块的右边距离网页右面的距离为50%*/
margin-right: -200px;
/*-200是代表将message块的右边，
从左向右移动message宽度的一半
从而达到居中的效果*/
text-align: center;
/* +++++++++++++++++++++慕课老师的代码
z-index: 2;
width: 500px;
position: absolute;
top: 350px;（老师能不能解释一下这个350和-150的计算过程）
margin-top:-150px;
负值代表向上
right: 50%;
margin-right: -250px;
负值代表从左向右
text-align: center;*/
}
/*设置banner区域中的input输入框的格式*/
.content .banner .message form ul li input {
background: transparent;
color: #ffffff;
width: 390px;
height: 30px;
border: 1px solid #ffffff;
padding-left: 5px;
margin-top: 5px;
}
/*设置banner区域中的input输入框
当鼠标放在上面时增加边框效果*/
.content .banner .message form ul li input[type="text"]:hover {
border: #07cbc9 1px solid;
}
/*设置banner区域中的textarea输入框的格式*/
.content .banner .message form ul li textarea {
background: transparent;
color: #ffffff;
width: 396px;
height: 185px;
border: 1px solid #ffffff;
padding-left: 5px;
padding-top: 10px;
box-sizing: border-box;
margin-top: 5px;
}
/*设置banner区域中的textarea输入框
当鼠标放在上面时增加边框效果*/
.content .banner .message form ul li textarea:hover {
border: #07cbc9 1px solid;
}
/*设置banner区域中的submit按钮格式*/
.content .banner .message form ul li input[type="submit"] {
width: 150px;
margin-left: -20px;
/*老师，这个-20px是我试出来的，请问有没有计算的方法;
我在.message的div中设置了属性text-align: center，
但是效果上没有对中，所以试出了这个-20px这个属性，
请问为什么设置了居中，没有居中效果？
假如-20px要计算的怎么计算？
*/
}
/*设置banner区域中的submit输入框
当鼠标放在上面时增加背景色效果*/
.content .banner .message form ul li input[type="submit"]:hover {
background: #07cbc9;
}
.about {
width: 100%;
height: 600px;
top: 850px;
/*margin-top:-50px;*/
/*position: relative;*/
background: red;
}
/*.about .about-top {
width: 100%;
height: 500px;
margin-top: 50px;
position: absolute;
/*left: 50%;*/
/*margin-left: -400px;*/
background: green;
}*/
/*.about .about-top .about-top-head {
text-align: center;
width: 400px;
height: 110px;
left: 50%;
margin-left: -200px;
top: 850px;
margin-top: 10px;
margin-left: 200px;
position: absolute;
background: pink;
}*/
/*.about .about-top .abot-top-center {
/*margin-top: 150px;*/
width: 660px;
height: 445px;
left: 50%;
/*margin-left: 50px;*/
float: left;
background: blue;
text-align: center;
}*/
/*.about .about-top .about-top-left {
float: left;
width: 250px;
text-align: center;
margin-top: 250px;
background: yellow;
}
.about .about-top .about-top-right {
float: right;
width: 100px;
margin-top: 250px;
margin-right: 150px;
background: red;
/*position: absolute;*/
}*/
正在回答 回答被采纳积分+1
同学你好，head和banner区域都设置了定位，脱离文档流。如果.about没有设置定位，将会顶上去，如果设置定位，则会出现在head和banner的下边。
关于代码中的问题：
message距离图片顶部的距离计算是正确的。
关于350和-150的计算，不清楚同学说的哪个老师的代码，这里会根据具体高度等代码计算。350和-150的意思是该标签距离顶部350px，之后margin-top:-150px表示向上移动了150px；
text-align属性规定元素中的文本的水平对齐方式，而这里的input标签不是文本。另外只需要大概居中即可。
祝：学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧