position定位

position有relative、absolute、fixed和static四个属性值：

先看一个例子：

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>


css部分：
*{margin:0;padding:0;}
.div1{width:200px;height:200px;background:yellow;}        
.div2{width:200px;height:200px;background:blue;}
.div3{width:200px;height:200px;background:red;}

效果图：

相对定位relative：

给.div2加上position:relative;left:200px;top:200px;得到如下效果：

 

position:relative;相对定位/定位偏移量

特点：

1、不影响元素本身特性

2、不会使元素脱离文档流（元素移动后原始位置会被保留）

3、如果没有定位偏移量，对元素本身没有影响：即上述例子中，如果只给.div2定义position:relative;而不定义left:200px;top:200px;那么.div2的位置不会改变

4、提升层级

 

absolute绝对定位：

如果将上述例子中.div2的相对定位改为绝对定位：即position:absolute;top:200px;left:200px;得到的效果为：

当设置position:absolute;top:200px;left:200px;后并没有得到第一个例子中的效果，需要给.div2设置position:absolute;top:400px;left:200px;给.div3设置position:absolute;top:400px;left:0;得到效果：

 

position:absolute;绝对定位/定位层级

特点：

1、使元素完全脱离文档流

2、使内嵌元素支持宽高

3、块属性标签内容撑开宽高

4、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移（document指的是可视区域，而body有一些默认样式margin:0;padding:0;document和body有一定区别）

5、相对定位一般都是配合绝对定位使用

6、提升层级

z-index:[number]；  定位层级
        a、定位元素默认后者层级高于前者；
        b、建议在兄弟标签之间比较层级

position:fixed;固定定位：

特点：

 与绝对定位的特性基本一致，差别是始终相对整个文档进行定位；
 问题：IE6不支持固定定位；

 定位其他值：
  position:static ； 默认值
  position:inherit ;  从父元素继承定位属性的值 (不兼容)

定位清除浮动方法、遮罩滤镜

position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；
position:fixed;  固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）

遮罩弹窗（优酷弹窗）
标准 不透明度：  opacity:0~1;
IE 滤镜：           filter:alpha(opacity=0~100);