css定位

定位

1.bottom检索或设置对象与其最近一个定位的父对象底边相关的位置。，用法如下 ##

.test{position:absolute;bottom:0;width:200px;height:200px;padding:5px 10px;background:#c00;color:#fff;line-height:12;}

2.clip检索或设置对象的可视区域。区域外的部分是透明的，用法如下

clip:rect(0 auto 35px 10px)表示分别从上-右-下-左四个方向开始裁剪，auto表示不裁剪

.test{position:absolute;height:50px;line-height:50px;clip:rect(0 auto 35px 10px);background:#eee;}

3.left检索或设置对象与其最近一个定位的父对象左边相关的位置。 ，用法如下

`.test{position:absolute;left:-50px;width:200px;height:200px;padding:5px 10px;background:#c00;color:#fff;line-height:12;}`

4.position检索对象的定位方式。

1. static:对象遵循常规流。top,right,bottom,left等属性不会被应用<br/>
2. relative:对象遵循常规流，并且依据自身在正常流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。层叠通过z-index属性定义。<br/>
3. absolute:对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠，其层叠通过z-index属性定义。<br/>   
4. fixed:对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值<br/>

5.right检索或设置对象与其最近一个定位的父对象右边相关的位置。用法如下

.test{position:absolute;right:0;width:200px;height:200px;padding:5px 10px;background:#c00;color:#fff;line-height:12;}

6.top检索或设置对象与其最近一个定位的父对象顶部相关的位置。用法如下

.test{position:absolute;top:-100px;width:200px;height:200px;padding:5px 10px;background:#c00;color:#fff;line-height:12;}

7.z-index检索或设置对象的层叠顺序

.z1{z-index:1;background:#000;}
.z2{z-index:2;top:30px;left:30px;background:#C00;}
.z3{z-index:3;top:60px;left:60px;background:#999;}