定位

一、基本概念

1、 position: static(默认) | relative | absolute |fixed | inherit

（1）relative:元素框偏移某个距离。元素仍保持其未定位前的形状，它原来所占的空间仍然保留。

（2）absolute：生成一个块级框，而不论元素本身是什么类型。元素原来在正常流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类 型的框。

（3）fixed:生成一个块级框，而不论元素本身是什么类型。包含框是视窗本身

2、包含块：每个元素都相对于包含块摆放。

（1）正常流中：包含块是块级祖先框、表单元格、或行内框祖先框的内容边界构成。

（2）浮动元素：包含块是最近的块级祖先元素（width 、height）

（3）position=absolute:包含块是最近的position值不是static的祖先元素（padding-left+width+padding-right、padding-top+height+padding-bottom）

position=fixed:包含块是浏览器窗口本身。

3、 top、right、bottom、left:auto（默认值）

应用于：定位元素（position不是static的元素）

百分数：top、bottom相对于包含块的高度，right 、left相对于包含块的宽带

二、绝对定位元素

1 、 一个定位元素的宽度和水平放置：

left + margin-left + border-left + padding-left + width +padding-right + border-right + margin-right = 包含块的width

一个定位元素的高度和垂直放置

top + margin-top + border-top + padding-top +height +padding-bottom +border-bottom+margin-bottom=包含块的height

2、绝对定位的非替换元素 width:auto;

绝对定位的替换元素：

水平

(1) 如果width为auto，width的实际使用值由元素内容的固有宽度决定（即图像的本来宽度50px 实际使用值就是50px）

(2)从左向右读的语言中，如果left:auto，将其替换成元素的静态位置

(3)如果水平偏移中只要有一个为auto,则将水平margin值中只要为auto的都设置为0px

(4)如果此时水平margin-left和margin-right都还是为auto把他们设置为相等的值，从而将元素在其包含块中居中

(5)在此后，如果只剩下一个auto值，则将其修改为等式的余下部分来使等式满足

(6)过度受限情况下,重新计算right

垂直

(1)如果height设置为auto,height的值由元素内容的固有高度确定

(2)如果top值为auto，将其替换为替换元素的静态位置。

(3) 如果bottom的值为auto，将margin垂直方向只要有auto设为0

(4) 如果此时margin-top和margin-bottom都还定义为auto，将其设置为相等的值使元素在包含块中垂直居中

(5)在此之后，如果仅剩下一个auto值，则将其修改为等于等式中的余下部分

（6）过度受限情况下,重新计算bottom

注意：IE7不支持绝对定位元素通过将上下外边局设置为auto来实现居中效果。 、