CSS定位

[b]1.relative相对定位[/b]

　　1>.不影响元素本身的特性(只是给元素加上position:relative属性元素本身不受影响)

　　2>.不使元素脱离文档流

　　3>.如果没有定位偏移量，对元素本身没有任何影响

[b]2.定位元素位置控制[/b]

　　top/left/right/bottom:定位元素偏移量

[b]3.absolute绝对定位[/b]

　　1>.使元素完全脱离文档流

　　2>.使内嵌元素支持宽高

　　3>.块属性标签由内容撑开

　　4>.如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移

　　5>.相对定位一般都是配合绝对定位使用的

[b]4.定位层级 z-index:number[/b]

　　a.定位元素默认后者层级高于前者

[b]5.遮罩弹窗[/b]

　　标准不透明 opacity: number 其中number为0到1之间的数字

　　IE滤镜 filter:alpha(opacity=number) 其中number为0 到100之间的数字， 标准不透明属性在ie下不起作用，所以为了兼容ie需要加上ie滤镜

示例代码：

.mask{
background: #000;
height: 100%;
width: 100%;
position: absolute;
opacity: 0.5;
filter:alpha(opacity=50);
left: 0px;
top: 0px;
}
.login{
width: 400px;
height: 300px;
position: absolute;
background: #fff;
margin-left: -200px;
margin-top: -150px;
left: 50%;
top: 50%;
}

　　　　　　<div class="mask">
　　　　　　</div>
　　　　　　<div class="login">
　　　　　　　　<h3>登录</h3>
　　　　　　</div>

效果图：


[b]6.固定定位 position:fixed[/b]
　　与绝对定位的特性基本一致，差别是始终相对于文档进行定位，也就是说纵轴出现滚动条，滚动滚动条的时候，位置也是不会随着滚动而改变。
　　问题：IE6不支持固定定位。
[b]7.定位的兼容问题、清浮动方法[/b]

　position:relative;
在 IE6 下父级的 overflow:hidden; 包不住子级的relative;

　position:absolute;
在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。

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