absolute和float是同父异母的兄弟，因为它们具有相同点：包裹性与破坏性
absolute的特点
1、独立的，并且可以摆脱overflow的限制，无论是滚动还是隐藏；
2、无依赖，不受relative限制的，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值；
3、脱离文档流；
4、具有跟随性（依据这个特点，能省很多的relative，并且扩展性更强）。
骚操作：使用注释来消除空格
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图标定位二三事</title>
<style>
body {
font: 14px/1.4 "Microsoft YaHei";
background-color: #EDEFF0;
}
body,
h3,
h5 {
margin: 0;
}
img {
border: 0 none;
vertical-align: bottom;
}
.l {
float: left;
}
.r {
float: right;
}
.constr {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.header {
background-color: #2A2C2E;
}
.nav {
height: 60px;
}
.nav-list {
float: left;
font-size: 14px;
font-weight: 400;
}
.nav-a {
display: inline-block;
line-height: 20px;
padding: 20px 35px;
color: #B5BDC0;
text-decoration: none;
}
.nav-a:hover {
color: #fff;
}
.course {
padding-top: 10px;
}
.course-list {
float: left;
width: 280px;
height: 240px;
margin: 5px 10px 15px;
border-radius: 0 0 1px 1px;
background-color: #F7FAF9;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 1px 2px #c5c5c5;
text-decoration: none;
}
.course-list-img {
background-color: #6396F1;
}
.course-list-h {
line-height: 50px;
font-size: 14px;
font-weight: 400;
color: #363d40;
text-align: center;
}
.course-list-tips {
margin: 0 14px;
font-size: 12px;
color: #b4bbbf;
overflow: hidden;
}
.icon-hot {
position: absolute;
width: 28px;
height: 11px;
margin: -6px 0 0 2px;
background: url(http://img.mukewang.com/545304730001307300280011.gif);
}
.icon-recom {
position: absolute;
line-height: 20px;
padding: 0 5px;
background-color: #f60;
color: #fff;
font-size: 12px;
}
.icon-vip {
position: absolute;
width: 36px;
height: 36px;
margin-left: -36px;
background: url(http://img.mukewang.com/5453048000015d8800360036.gif);
text-indent: -9em;
overflow: hidden;
}
</style>
</head> <body>
<div class="header">
<div class="constr">
<div class="nav">
<h3 class="nav-list">
<a href="http://www.imooc.com/course/list" class="nav-a">课程</a>
</h3>
<h3 class="nav-list">
<a href="http://www.imooc.com/wenda" class="nav-a">问答</a>
</h3>
<h3 class="nav-list">
<a href="http://www.imooc.com/seek/index" class="nav-a">
求课<i class="icon-hot"></i>
</a>
</h3>
</div>
</div>
</div> <div class="main">
<div class="constr">
<div class="course">
<a href="http://www.imooc.com/view/121" class="course-list">
<div class="course-list-img">
<span class="icon-recom">推荐</span>
<img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!--
--><i class="icon-vip">vip</i>
</div>
<h5 class="course-list-h">分享：CSS深入理解之float浮动</h5>
<div class="course-list-tips">
<span class="l">已完结</span>
<span class="r">3514人学习</span>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本图标对齐与定位二三事</title>
<style>
body {
margin: 0;
font: 14px/1.4 "Microsoft YaHei";
background-color: #EDEFF0;
}
a {
color: #50B6E5;
}
.constr {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.regist-head {
height: 60px;
line-height: 60px;
padding-left: 30px;
background-color: #be3948;
color: #fff;
font-size: 18px;
}
.regist-body {
min-height: 400px;
padding: 100px 0;
background-color: #fff;
}
.regist-main {
width: 600px;
margin-left: auto;
margin-right: auto;
}
.regist-group {
margin-top: 20px;
overflow: hidden;
}
.regist-label {
width: 70px;
padding-top: 10px;
float: left;
}
.regist-cell {
display: table-cell;
*display: inline-block;
}
.regist-input {
height: 18px;
line-height: 18px;
width: 260px;
padding: 10px 5px;
margin: 0 10px 0 0;
border: 1px solid #d0d6d9;
vertical-align: top;
}
.regist-code-input {
width: 130px;
}
.regist-btn {
display: inline-block;
width: 160px;
line-height: 40px;
background-color: #39b94e;
color: #fff;
text-align: center;
text-decoration: none;
}
.regist-btn:hover {
background-color: #33a646;
}
.icon-warn {
display: inline-block;
width: 20px;
height: 21px;
background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center;
}
.regist-star {
position: absolute;
margin-left: -1em;
font-family: simsun;
color: #f30;
}
.regist-remark {
position: absolute;
line-height: 21px;
padding-top: 9px;
color: #666;
}
.regist-warn {
padding-left: 20px;
color: #be3948;
}
.regist-warn>.icon-warn {
position: absolute;
margin-left: -20px;
}
</style>
</head> <body>
<div class="constr">
<div class="regist-head">注册</div>
<div class="regist-body">
<div class="regist-main">
<div class="regist-group">
<label class="regist-label"><span class="regist-star">*</span>登录邮箱</label>
<div class="regist-cell">
<input type="email" class="regist-input"><span class="regist-remark regist-warn">
<i class="icon-warn"></i>邮箱格式不准确（演示）
</span>
</div>
</div>
<div class="regist-group">
<label class="regist-label"><span class="regist-star">*</span>登录密码</label>
<div class="regist-cell">
<input type="password" class="regist-input"><span class="regist-remark">
请输入6-16位密码，区分大小写，不能使用空格
</span>
</div>
</div>
<div class="regist-group">
<label class="regist-label"><span class="regist-star">*</span>用户昵称</label>
<div class="regist-cell">
<input type="password" class="regist-input">
</div>
</div>
<div class="regist-group">
<label class="regist-label">手机号码</label>
<div class="regist-cell">
<input type="tel" class="regist-input">
</div>
</div>
<div class="regist-group">
<label class="regist-label"><span class="regist-star">*</span>验 证 码</label>
<div class="regist-cell">
<input class="regist-input regist-code-input"><img src="http://img.mukewang.com/545308540001678401500040.jpg">
</div>
</div>
<div class="regist-group">
<label class="regist-label"> </label>
<div class="regist-cell">
<input type="checkbox" checked><label>我已阅读并同意<a href="##">慕课协议</a>。</label>
<p>
<a href="javascript:" class="regist-btn">立即注册</a>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
z-index无依赖
1、如果只有一个绝对定位元素，自然不需要z-index，自动覆盖普通元素；
2、如果两个绝对定位，控制DOM流的前后顺序达到需要的覆盖效果，依然无z-index；
3、如果多个绝对定位交错，非常非常少见，z-index：1控制；
4、如果非弹框类的绝对定位元素z-index>2，必定z-index冗余，请优化。
九宫格代码实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高度自适应的九宫格效果</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
.page {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.list {
float: left;
height: 33.3%;
width: 33.3%;
position: relative;
}
.list:before {
content: '';
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border-radius: 10px;
background-color: #cad5eb;
}
.list:after {
content: attr(data-index);
position: absolute;
height: 30px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
font: 24px/30px bold 'microsoft yahei';
}
</style>
</head> <body>
<div class="page">
<div class="list" data-index="1"></div>
<div class="list" data-index="2"></div>
<div class="list" data-index="3"></div>
<div class="list" data-index="4"></div>
<div class="list" data-index="5"></div>
<div class="list" data-index="6"></div>
<div class="list" data-index="7"></div>
<div class="list" data-index="8"></div>
<div class="list" data-index="9"></div>
</div>
</body>
</html>
绝对定位整页布局演示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>慕课网-绝对定位整页布局演示</title>
<style>
body {
font-family: 'microsoft yahei';
}
/* wechat.css */ body {
margin: 0;
-webkit-user-select: none;
user-select: none;
-ms-touch-action: none;
}
/* construction */ html, body, .page {
height: 100%;
width: 100%;
overflow: hidden;
}
.page {
position: absolute;
left: 0;
top: 0;
}
body {
background-color: #ebebeb;
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: 400;
}
ul, ol {
margin: 0;
list-style-type: none;
}
.header, .footer, .content {
position: absolute;
left: 0;
right: 0;
}
.header {
height: 48px;
padding: 0 5px;
background-color: #21292B;
color: #fff;
top: 0;
z-index: 1;
}
.header>h1 {
line-height: 48px;
margin: 0 0 0 10px;
font-size: 18px;
float: left;
}
.header>a {
display: inline-block;
width: 48px;
height: 48px;
background-size: 48px 144px;
text-indent: -9em;
overflow: hidden;
}
.header>.icon-search, .header>.icon-add {
float: right;
}
.footer {
height: 52px;
border-top: 1px solid #dfdfdf;
background-color: #fcfcfc;
bottom: 0;
z-index: 1;
}
.footer>a {
width: 25%;
text-align: center;
color: #999;
float: left;
font-size: 14px;
}
.footer>a>i {
display: block;
height: 35px;
margin-bottom: -3px;
background-size: 35px 280px;
}
.footer>.active {
color: #45c018;
}
.content {
top: 48px;
bottom: 53px;
overflow: auto;
}
.icon-search, .icon-back, .icon-add {
background: url(http://img.mukewang.com/547d339b000188bb00960288.png) no-repeat;
}
.icon-back {
background-position: 0 -96px;
}
.icon-add {
background-position: 0 -48px;
}
.icon-wechat, .icon-contacts, .icon-finds, .icon-mes {
background: url(http://img.mukewang.com/547d33970001444d00700560.png) no-repeat center top;
}
.active .icon-wechat {
background-position: center -35px;
}
.icon-contacts {
background-position: center -70px;
}
.active .icon-contacts {
background-position: center -105px;
}
.icon-finds {
background-position: center -140px;
}
.active .icon-finds {
background-position: center -175px;
}
.icon-mes {
background-position: center -210px;
}
.active .icon-mes {
background-position: center -245px;
}
.icon-find {
background: url(icon-find.png) no-repeat;
background-size: 28px 210px;
}
.icon-find-2 {
background-position: 0 -30px;
}
.icon-find-3 {
background-position: 0 -60px;
}
.icon-find-4 {
background-position: 0 -90px;
}
.icon-find-5 {
background-position: 0 -120px;
}
.icon-find-6 {
background-position: 0 -150px;
}
.icon-find-7 {
background-position: 0 -180px;
}
.icon-me {
background: url(icon-me.png) no-repeat;
background-size: 28px 120px;
}
.icon-me-2 {
background-position: 0 -30px;
}
.icon-me-3 {
background-position: 0 -60px;
}
.icon-me-4 {
background-position: 0 -90px;
}
.wechat-list {
display: block;
height: 64px;
padding: 8px 12px;
box-sizing: border-box;
border-bottom: 1px solid #d7d7d7;
background-color: #fff;
}
.wechat-list:last-child {
border-bottom: 0;
}
.wechat-list>img {
width: 48px;
height: 48px;
float: left;
}
.wechat-list>.cell {
padding-left: 58px;
line-height: 24px;
color: #333;
}
.wechat-h-time {
overflow: hidden;
}
.wechat-h-time>h5 {
font-size: 100%;
float: left;
}
.wechat-h-time>time {
font-size: 12px;
color: #b9b9b9;
float: right;
}
.wechat-h-time .business {
color: #54688D;
}
.wechat-h-time+p {
margin: 0 20px 0 0;
font-size: 14px;
color: #a8a8a8;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.wechat-detail {
position: relative;
z-index: 1;
}
}
</style>
</head> <body>
<div class="page">
<div class="header">
<h1>慕课网</h1>
<a href="javascript:" class="icon-add">添加</a>
<a href="javascript:" class="icon-search">搜索</a>
</div>
<div class="content">
<div class="">
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>早上09:51</time></div>
<p>CSS深入理解值绝对定位</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>早上09:38</time></div>
<p>如果高度不够，可以手动缩小浏览器高度</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>早上08:47</time></div>
<p>此demo是本系列最后一个demo</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>早上08:36</time></div>
<p>此demo需要在高级浏览器中查看</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>昨天</time></div>
<p>重在原理展示，结构可多变。例如，header放在page外面~~</p>
</div>
</a>
<a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>昨天</time></div>
<p>最近鄙人整了个名叫Mobilebone的开源项目</p>
</div>
</a>
<a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>星期三</time></div>
<p>就是依赖绝对定位整体布局，大家可以前去围观</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5 class="business">慕课网</h5><time>星期三</time></div>
<p><img src="http://img.mukewang.com/547d33a00001299b00320033.jpg" width="16" height="16"></p>
</div>
</a>
<a href="http://www.imooc.com/learn/121" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>星期三</time></div>
<p>CSS深入理解之浮动</p>
</div>
</a>
<a href="http://www.imooc.com/learn/121" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>上周</time></div>
<p>同样精彩，欢迎支持~</p>
</div>
</a>
</div>
</div> <div class="footer">
<a href="http://www.imooc.com/course/list">
<i class="icon-wechat"></i>课程
</a>
<a href="http://www.imooc.com/wenda">
<i class="icon-contacts"></i>问答
</a>
<a href="http://www.imooc.com/seek/index">
<i class="icon-finds"></i>求课
</a>
<a href="http://www.imooc.com/space/course" class="active">
<i class="icon-mes"></i>我的课程
</a>
</div>
</div>
</body>
</html>