1.相对定位position:relative;它是相对于当前位置来进行定位
2.绝对定位position:absolute;它是脱离了原文档流，需要给它一个参照物，所以给它套一个父级来作为参照
3.使用绝对定位要结合相对定位来使用，如果需要使用绝对定位，应给绝对定位添加一个父级来参照，这就相对于父级来定位元素
4.固定定位position:fixed;顾名思义就是固定
5.本篇使用到Font Awesome字体库来美化页面
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用定位制作登录页面和在线客服(固定定位，绝对定位，相对定位)2019/04/26</title>
<link rel="stylesheet" href="static/lib/font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{margin:0;padding:0;}
button{border:none;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
body{
height:2000px;
}
.log-img{
position:relative;
margin-top: 70px;
width:100%;
height:600px;
background-image: url("https://gtms01.alicdn.com/tps/i1/TB1GTCYLXXXXXcHXpXXcoeQ2VXX-2500-600.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.log-weight{
height: 18px;
line-height: 18px;
font-size: 16px;
color: #3c3c3c;
margin-top: 9px;
padding-bottom: 8px;
font-weight: 700;
}
.form-log{
position:absolute;
background-color:#E9E9F2;
top: 260px;
right: 229px;
width:350px;
height:300px;
text-align:center;
}
.log-input input{
width:250px;
height:32px;
}
.log-input{
position:relative;
}
.user{
display:block;
position:absolute;
background-color:#ddd;
color:#fff;
width:35px;
height:35px;
left:12px;
top:30px;
}
.log-input input{
margin:29px;
}
button{
display:block;
position:absolute;
width:255px;
height:38px;
color:#fff;
text-align:center;
line-height: 32px;
left:47px;
top:240px;
background-color:#F52B00;
}
button:hover{
background-color:#ff4400;
}
.comment{
position:fixed;
right:5px;
bottom:11px;
}
.comment :hover{
color:lightblue;
}
</style>
</head>
<body>
<div class="log-img"></div>
<div class="form-log">
<div>
<form action="" method="">
<div class="log-weight">密码登录</div>
<div class="log-input">
<libel class="user"><i class="fa fa-user fa-2x"></i></libel>
<input type="text" placeholder="会员名/手机/邮箱" autofocus required>
</div>
<div class="log-input">
<libel class="user"><i class="fa fa-lock fa-2x"></i></libel>
<input type="password" required>
</div>
<div class="sub">
<button>登录</button>
</div>
</form>
</div>
</div>
<div class="comment" title="在线客服"><a href=""><i class="fa fa-comments fa-2x"></i></a></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
