1、用绝对定位制作登录页
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用绝对定位制作登录页</title>
<style>
body {
margin: 0;
background-image: url("https://abc.2008php.com/2011_Website_appreciate/11-03-29/20110329233325.jpg");
background-size: cover;
}
/*设置遮罩*/
.shade {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.login img {
width: 440px;
height: 560px;
}
.login {
background-color: white;
position: absolute;
left: 50%;
top: 50%;
margin-left: -220px;
margin-top: -280px;
}
</style>
</head>
<body>
<div class="shade"></div>
<div class="login"><img src="https://img.zcool.cn/community/0187845704b05e32f875a944c32e13.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、用固定定位实现qq客服效果
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用固定定位实现qq客服效果</title>
<style>
body {
height: 2000px;
}
.ads {
width: 150px;
height: 50px;
background-color: lightgrey;
position: fixed;
right: 0;
bottom: 50%;
}
button {
float: right;
margin-top: 5px;
margin-left: 20px;
border: none;
background: none;
color: red;
font-size: 1em;
}
.p {
position: absolute;
right: 25px;
}
</style>
</head>
<body>
<h1 style="color: red">点击右边的QQ交谈即可与我在线联系</h1>
<div class="ads">
<button onclick="this.parentNode.style.display = 'none'">X</button>
<p style="text-align: center" class="p">
<a target="_blank" href="http://sighttp.qq.com/authd?IDKEY=82a4253cea1520099afd049ed09afde56484f5a627e412f3">
<img border="0" src="http://wpa.qq.com/imgd?IDKEY=82a4253cea1520099afd049ed09afde56484f5a627e412f3&pic=51" alt="亲，请点击此处联系我哦" title="亲，请点击此处联系我哦"/></a>
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
个人总结：
相对定位：是以元素在文档流中的原始位置为参照物进行定位的；
绝对定位：它是脱离了文档流，所以必须要有一个定位父级作为参照物；
固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位。
第一题作业是用绝对定位完成，把body作为父级控件作为参照物，body里设置一个图片背景，通过透明度opacity显示出背景内容，设置图片大小，然后position设置为absolute（绝对定位），左边和上面都设置为50%，再把每个方向向相反方式拉,设置负外边距，设置的负值是登录块大小的一半，这样图片就一直保持在中间位置；
第二题作业是使用固定定位功能完成的，先设置body区域大小，然后设置QQ交谈区块的大小，position设置为fixed（固定定位），右边为0，上边设置50%，使区块一直显示在最右边居中位置。