Absolute绝对定位部分
一、absolute的概念:
absolute是相对于最近它的那个已定位的祖先元素定位的，如没有已定位的祖先元素，则相对于初始包含块(body)定位的。
我们一直认为absolute必须搭配relative才能被使用，事实上，
relative和absolute是分离，对立的。
独立的absolute可以摆脱overflow限制，无论是滚动的还是隐藏的。
（当元素设置绝对定位后，
其父元素的overflow：scroll； 堆砌没有任何影响。
而当父元素设置position:relative; overflow:hidden; 那么该元素position:absolute;则失去了作用。）
与relative不同的是，absolute与float元素的一样，位置与文档流无关，也因此不占据空间。
（绝对定位会将该元素从文档中拉出来，相当于将该元素标签先从文档中删除，当元素position:absolute化时，这个元素会根据第一个定义了position的父元素 (static元素除外 ) 进行top、left、right进行定位，可能会覆盖其他元素来进行定位。）
如果父元素都不满足，则相对于body元素生成一个新的块。
二、absolute的特性：
去浮动：
当第二张图片设置float:left后，【点击第2张图片应用position:absolute变天使】可以去浮动属性，
绝对定位元素脱离文档流，覆盖住第3张图片。
而当第二张图片设置position:absolute属性后，float属性将失效（脱离文档流不占据空间）
"点击第2张图片应用position:absolute变天使">
源码
位置跟随：
|Tips|：外层元素不使用相对定位，直接对里面的元素使用absolute定位，然后使用margin来精确定位，实现相对定位的效果。
/*跟随特性可以更好的实现自适应效果*/
求课
.icon-hot {
position: absolute;
width: 28px;
height: 11px;
margin: -6px 0 0 2px; //上浮效果
background: url(img/hot.gif); }
/* 注释是为了增强代码的可读性 同时也不影响图片与文字的无缝连接（消除空格）
注释的原因：消除图片和i标签的空格（一般是为了代码结构的整洁性，添加的回车换行）*/
推荐
vip
.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(img/vip.gif);
text-align: -9em;
overflow: hidden;
}
源码
三、absolute与width/height，以及top、bottom等之间关系
absolute与width和height
当内部元素position:absolute；时，
容器无需固定的width/height值，内部元素亦可拉伸；
容器拉伸，内部元素支持百分比width/height值；
left/right拉伸和width同时存在
对于position:absolute/fixed的元素，同时设置left、right和width，即可由margin:auto水平居中；
同理，top、bottom、height即可设置垂直居中。
【实践】absolute位置跟随实现下拉框定位
/*在HTML中将ul放在input前面，再利用absolute位置跟随特性，宽和高脱离了文档流不占空间特性，再配合margin来实现。*/
<-----------HTML代码------------->
<-----------CSS代码------------->
.course-sidebar-result {
display: none;
position: absolute;
width: 260px;
margin: 39px 0 0 -1px;
padding-left: 0;
list-style-type: none;
border: 1px solid #e6e8e9;
background-color: #fff;
box-shadow: 0px 1px 2px #d5d7d8;
font-size: 12px;
}
