实例
<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="UTF-8">
<meta name="Author" content="MrTao,80238980@qq.com">
<title>登录页与QQ客服</title>
<link rel="stylesheet" type="text/css" href="static/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{
margin: 0px;
padding:0px
}
li{
list-style: none;
}
a{
text-decoration: none;
color: gray;
font-size: 13px;
}
.topnav{
width: 100%;
height: 30px;
background-color:#424C4F;
box-shadow: 0px 3px 2px #cccccc;
position: fixed;
left: 0px;
top:0px
}
.topnav_con{
width: 1280px;
height: 30px;
margin: 0px auto;
line-height: 30px;
}
.topnav_left{
width: 100px;
height:30px;
float: left;
}
.topnav_left a{
color: white;
font-size: 14px;
}
.topnav_right{
width: 220px;
height: 30px;
float: right;
}
.topnav_c1{
height: 30px;
width: 50px;
text-align: center;
margin-right: 1px;
display: inline-block;
}
.topnav_c1 a{
color: white;
font-size: 14px;
}
.topnav_c1 a:hover{
color: #F08200;
}
.clear{
clear: both;
}
body{
height: 4000px;
margin: 0;
background-image: url("../images/bg2.jpg" alt="背景图");
background-size: contain;
background-repeat: repeat;
}
.shade{
position: absolute;
left: 0;
top: 30px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
}
.login{
width: 490px;
height: 330px;
}
.login_top {
width: 490px;
height: 60px;
background-color: #cccccc;
opacity: 0.7;
position: relative;
}
.login_c1{
width: 490px;
height: 60px;
font-size: 25px;
text-align: center;
line-height: 60px;
float: left;
}
.login_c2{
width: 23px;
height: 23px;
position: absolute;
right:10px;
top: 10px;
opacity:0.9 ;
}
span{
font-size: 2em;
}
.login_bot{
background-color: white;
opacity:0.9 ;
width: 490px;
height: 270px;
position: relative;
}
.login_d1{
width: 260px;
height: 30px;
position: absolute;
left: 115px;
top: 30px;
}
.login_d1 input{
width: 260px;
height: 30px;
font-size: 13px;
color: gray;
text-indent: 5px;
}
.login_d2{
width: 260px;
height: 30px;
position: absolute;
left: 115px;
top: 90px;
}
.login_d2 input{
width: 260px;
height: 30px;
text-indent: 5px;
}
.login_d2 li{
font-size: 13px;
color: gray;
position: absolute;
left: 5px;
top: 5px;
}
.login_d3{
width: 260px;
height: 30px;
line-height: 30px;
font-size: 13px;
color: gray;
position: absolute;
left: 115px;
top: 135px;
}
.login_d4{
width: 124px;
height: 48px;
position: absolute;
left: 115px;
top: 165px;
}
.login_d4 button{
border:none;
width: 124px;
height: 48px;
background-color: #3EB0F0;
border-radius: 5px;
font-size: 25px;
letter-spacing: 15px;
text-indent: 14px;
color: white;
box-shadow: 3px 3px 3px gray;
}
.login_d4{
width: 124px;
height: 48px;
position: absolute;
left: 115px;
top: 165px;
}
.login_d5{
width: 124px;
height: 48px;
position: absolute;
right: 5px;
bottom: 5px;
}
.login_e1{
width: 60px;
height: 20px;
position: absolute;
right: 90px;
bottom: 10px;
}
.login_e2{
width: 20px;
height: 20px;
color: gray;
line-height: 20px;
position: absolute;
right: 70px;
bottom: 10px;
}
.login_e3{
width: 60px;
height: 20px;
position: absolute;
right: 10px;
bottom: 10px;
}
.login{
position: fixed;
left: 50%;
top: 50%;
margin-left: -245px;
margin-top: -165px;
}
.ads{
width: 60px;
height: 120px;
background-color: #ee7800;
border-radius: 30px;
position: fixed;
right: 200px;
bottom: 50%;
}
</style>
</head>
<div class="topnav">
<div class="topnav_con">
<div class="topnav_left"><a href="">手机版</a> </div>
<div class="topnav_right">
<div class="topnav_c1" style="text-decoration:underline"><a href="">登录</a></div>
<div class="topnav_c1"><a href="">注册</a></div>
<div class="topnav_c1"><a href="">充值</a></div>
<div class="topnav_c1"><a href="">收藏</a></div>
</div>
</div>
</div>
<div class="clear"></div>
<!--<div class="shade"></div>-->
<div class="login">
<div class="login_top">
<div class="login_c1">登录</div>
<div class="login_c2"><span class="fa fa-times" style="color: black ;" ></span></div>
</div>
<div class="login_bot">
<div class="login_d1">
<input type="text" name="login" value="手机号或邮箱">
</div>
<div class="login_d2">
<input type="password" name="pwd">
<li>密码</li>
</div>
<div class="login_d3">
<input type="radio" name="sex">记住密码
</div>
<div class="login_d4">
<button>登录</button>
</div>
<div class="login_d5">
<div class="login_e1"><a href="">忘记密码?</a></div>
<div class="login_e2"> ︱</div>
<div class="login_e3"><a href="">申请账号</a></div>
</div>
</div>
</div>
<div class="ads">
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img src="https://pub.idqqimg.com/wpa/images/counseling_style_53.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</div>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
写在结尾的话：
相对定位跟绝对定位是相对存在的，相对定位的作用就是做绝对定位父元素，给绝对定位提供参照的！
有一点觉得需要注意的是，如果父级有几层都设置了相对定位的情况下，绝对定位以最近一层的父级作为参照!
而如果绝对定位没有父级元素设置相对定位属性，那么他就是以body作为参照来进行定位！
固定定位是以浏览器窗口作为参照，不会随着浏览器滚动条的滚动而进行移动！