CSS定位

CSS有3种基本的定位机制：标准流、浮动和绝对定位。除非专门指定，否则所有元素都在标准流中定位。也就是说，标准流中的元素的位置有元素在HTML中的位置决定。
而CSS定位属性允许你对元素进行定位，与定位相关的属性如图所示

相对定位 position:relative;

相对定位就是让这个元素相对于他在文档中的初始位置进行移动。如：
.box2{
position:relative;
left:30px;
top:20px;
}

注意，在使用相对定位时，无论是否移动，元素仍然占据原来的空间。因此移动元素会导致它覆盖其他元素。

特点：
1.不影响元素本身的特性；
2.不是元素脱离文档流
3.如果没有定位偏移量，对元素本身没有任何影响

绝对定位 position:absolute;

绝对定位使元素的位置与文档流无关，因此不占据空间，元素的位置是相对于最近的已定位的祖先元素，意思就是它最初的包含块。如：

.box2{
position:absolute;
left:30px;
top:20px;
}

特点：
1.使元素完全脱离文档流；
2.使内嵌支持宽高
3.块属性标签内容撑开宽度；
4.如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
5.相对定位一般都是配合绝对定位元素使用；

固定定位position:fixed;

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

元素的堆叠顺序

由于绝对定位元素的的框与标准流无关，定位元素默认后者层级高于前者，很可能覆盖页面上的其他元素，可以通过设置z-index属性来控制这些框的堆叠次序，z-index属性只能应用于使用了绝对定位的元素，其值为整数，可以为正数也可以为负数，例如：

.box2{
position:absolute;
left:30px;
top:20px;
z-index:-1
}

由于其他两个框默认堆叠值为0，所以-1将位于其他两个框的下面。

元素的溢出

overflow属性用来规定当内容溢出元素框时如何处理，其常见属性值如表：

元素的剪裁

clip属性用来剪裁绝对定位元素，它可以为元素块定义一个矩形剪裁框，剪裁框之外的区域不显示，基本语法为：clip:rect(top,right,bottom,left);例如，clip:rect(2px,2px,2px,2px);表示将元素块的上下左右各剪裁掉2像素.

定位的兼容性问题、清浮动方法

1.position:relative;
在IE6下父级的overflow:hidden;包不住子级的relative；
2.position:absolute;
在IE6下定位元素的父级宽度都为奇数那么IE6下定位元素的right和bottom都有1像素的偏差。
3.position:absolute;
绝对定位元素子级的浮动可以不用写清浮动方法；
4.position:fixed;
固定定位元素子级的浮动可以不用写清浮动方法。（IE6不兼容）