CSS定位

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

| 属性 | 描述 |
|: ------------- :|:-------------:|
| position | 把元素放在一个相对或绝对的位置上，具体位置由属性来定。 |
| top | 设置定位元素的上外边距边界与其包含块上边界之间的偏移 |
|right| 设置定位元素的右外边距边界与其包含块右边界之间的偏移|
| bottom | 设置定位元素的下外边距边界与其包含块下边界之间的偏移 |
|left| 设置定位元素的左外边距边界与其包含块左边界之间的偏移|
| overflow | 设置当元素溢出元素框时如何处理 |
|clip| 设置绝对定位元素的形状，元素内容被剪入这个形状之中，可裁剪掉形状之外的区域|
|vertical-align| 设置元素的垂直对齐方式|
| z-index | 设置绝对定位元素的堆叠顺序 |
left、top、right、bottom这4个属性值，它们都是配合position属性使用的，只有当position属性设置为 absolute、fixed、relative才有效，否则没有任何意义。
position属性有4个属性值，代表不同的定位方式

| 属性值 | 描述 |
|: ------------- :|:-------------:|
| absolute | 生成绝对定位元素，该元素相对于最近的已定位的祖先元素进行定位元素的位置 通过left、top、right、bottom属性进行规定|
| fixed | 生成绝对定位元素，该元素相对于浏览器窗口进行定位，元素的位置 通过left、top、right、bottom属性进行规定|
|relative| 生成相对定位元素，该元素相对于其正常位置进行定位，例如：left:20px;会向元素的left位置添加20像素|
| static | 默认值。|
在定位过程中left、top、right、bottom4个属性只需要定义两个，如：左上角：left:0px;top:0px;

相对定位 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属性用来规定当内容溢出元素框时如何处理，其常见属性值如表：

| 属性值 | 描述 |
|: ------------- :|:-------------:|
| visible | 内容不会被修剪，会呈现在元素框之外|
| hidden | 元素框之外的元素将会被修剪，修剪掉的内容不会显示|
|scroll|元素框之外的元素将会被修剪，但是浏览器会显示滚动条以便查看修剪掉的内容 |
|auto | 让浏览器自动处理被修剪掉的内容，通常会显示滚动条以便查看|

元素的剪裁

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不兼容）