一 基础知识点
css position 属性
| 值 | 描述 |
|---|---|
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
元素是文档结构的基础，在css里面，每个元素生成了包含内容的框（box）,大家都叫“盒子”。但是不同的元素显示方式是不同的，有占据一整行的，有水平一个挨着一个的。比如：div 与span的方式不一样。
什么是替换元素与非替换元素
替换元素：
替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。
非替换元素：
(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。
比如<p>wanmei.com</p>
浏览器将把这段内容直接显示出来。
除了这两字，还有两种非常属性的元素，显示元素，他分为两种情况，一种是‘块及元素’ ‘block’，还有一种是“行内元素”inline，大家也叫“内联元素”。
块及元素
他最明显的特征就是独自占领一行，自动充满父级元素的内容区域，绝不会让别人“侵略”（当然可以通过其他方式去改变他）。
常见的有：div，p..等等。
通过CSS设定了浮动（float属性，可向左浮动或向右浮动）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素。这个地方浮动是一个比较特殊的情况，可以详查浮动这个知识
行内元素：
上面说块及元素独自占领一行，行内元素就没这么霸道了，他可以左右都允许有元素，最常见的就是<a></a>
通过display:'inline'设置以后都会变成行内元素。
破坏性：元素设置了absolute之后，会使其父元素的高度(height)塌陷，无论父元素是什么position,float 也有同样的破坏性.
这种塌陷的原因是:设置absolute属性的元素，其脱离了文档流，即脱离了父元素，所以父元素没有了该元素，所以高度会塌陷，如果去掉父元素的padding：10px，效果更明显，一点高度就都没有了。
包裹性：在子元素不脱离文档流的情况下，给父元素加上absolute，会严丝合缝的完全包裹子元素。
absolute的包裹性是对容器的absolute化。容器设置absolute后，容器变为了 inline-block，容器本身没有设置宽度和高度的话，那么容器的宽高就等于内容的宽高，表现结果就是容器把内容包裹起来。
限制：用clear限制float，用relative限制absolute，relative和absolute是分离的，对立的. 独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏。
绝对定位是根据其【包含块】来定位，因为其容器并未设置position为relative/absolute/fixed中的任何一个，自身就不形成 【包含块】，所以子元素的定位就不是按照其直接容器定位了，所以哪怕滑动位置也不会变。
无依赖：当absolute不受relative的限制，并且不适用top，left,right,bottom,和auto作为值。
1 脱离文档流：绝对定位会把这个元素首先从文档流中拉出来，然后，这个被拉出的元素会根据第一个定义了定位方式的（不定义默认是static）的非static方式的父元素，如果不满足，则相对于body元素生成一个新的块。
2 去浮动：使用absolute时，float会失去作用
3 位置跟随：元素是block那么absolute之后依然是block排列,inline时absolute后依然inline排列. （在谷歌浏览器下，绝对定位之后，改变为display：block属性之后不会做任何渲染）
IE7下用position:absolute;时，元素会成为inline-block,在外层套div解决这个bug
4 精确定位：margin，支持负值定位，兼容ie6
5 超越overflow:绝对定位absolute并不是相对于其父元素定位的，而是相对于其【包含块】定位的，如果给其父元素position:relative另其形成【包含块】，内部的关闭按钮就也会滚动了
实例：
1 图片图标覆盖，如左上角的“推荐”，“VIP”，“HOT”图标,有时候空格会被满宽的元素挤下来到新一行，从而影响之后的absolute元素。
2 <ul>在<input>前，设置<ul>定位absolute定位，<input>坍缩到<ul>的位置。再用margring定位。
如果父级是absolute或relative，ul 用fixed可超出边界。
3 居中用text-align:center控制空格,空格后的img 用absolute定位。
使course-fixed表现得像内联元素，但是text-align:right并不能对它起作用，而是对那个空格起作用，将空格定位在最右边。
course-fixed成为内联元素后，可以与空格在同一行，但是由于空格已经在最右边了，所以如果course-fixed不加absolute的话，还是会被挤到下一行去
4.处理文字前的星号 将星号绝对定位后其不占据任何空间，方便后面的文字左对齐
5 处理文字溢出 利用absolute绝对定位使span不占据任何空间，从而使其不换行（注<span>必须紧跟前一个标签，不能有空格）
6 图片与文字垂直对齐 对图标设置绝对定位，并设置margin为负值（为宽度值）
脱离文档流：
z-index =1 对多个绝对定位有什么作用？
可以设置各个div的层级关系，如果两个div位置重合的话，z-index大的在上面，z-index小的在下面，z-index大的会遮盖z-index小的
定位(top,left,right,bottom)：absolute克星是position:relative/absolute/fixed/sticky
相互替代性：绝对定位方向相反时，不是瞬间移动，而是拉伸,和设置width和height一样
相互支持：1 容器无需设置width/height,内部元素亦可拉伸。
2 容器拉伸，内部元素可用百分比的width/height
left,right和width相互合作性：
1 高度设置优先级高于方向定位
2 当尺寸限制、拉伸以及margin:auto同时出现的时候，就会有绝对定位元素的绝对绝对居中效果；
如下代码可以实现上下左右居中position: absolute;margin:auto;left: 0; top: 0; right: 0;bottom:0;50%;height:50%;备注：此方法适合IE8+
absolute与页面整体布局(适合移动web布局策略):
1、升降机的子div(假设类名为page)满屏走起：.page{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#ccc;}
绝对定位受限于父级，因此，page要愉快的拉伸，需要：htmlbody{height:100%;}
2、各模块-头尾、侧边栏(pc端)各居其位
header,footer{position:absolute;left:0;right:0;}
header{height:48px;top:0;}
footer{height:52px;bottom:0;}
aside{250px;position:absolute;left:0;top:0;bottom:0;}
3、内容区域想象成body
.content{position:absolute;top:48px;bottom:52px;left:250px;overflow:auto;}
此时的头部尾部以及侧边栏都是fixed效果，不跟随滚动。避免了移动端position:fixed实现的诸多问题。
4、全屏覆盖与page平级
.overlay{
position:absolute;
top:0;right:0;bottom:0;left:0;
background-color:rgba(0,0,0,.5);
z-index:9;
}