相对定位和绝对定位详解

1、本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。（本文的示例，请看这个附件demo。）说明：占位空间：元素在文档流中所占据的空间。物理空间：元素本身所占据的空间。下面分3种情况分别对相对定位和绝对定位进行讨论：1仅只使用2仅只使用第一组属性布局定位元素的情况第二组属性布局定位元素的情况3.混合使用第一组和第二组属性的情况图1为未定位时的初始效果，层级关系为：效果图：box1box2box3一、用相对定位布局块级元素元素设置值：此属

2、性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）仅使用、和属性布局相对定位元素的情况元素原本所占的占位空间仍保留，物理空间偏移。图中，设置元素的和的值，对进行布局，可以发现除了偏移之外,其他块级元素的位置没有被影响，可见的占位空间还是存在的。层级关系为：效果图：效果图：仅使用用属性布局相对定位元素的情况属性和属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：负值负值图中，和都设置了元素仅使用用属性布局相对定位元素的情况属性和属性设置负值可以改变文档流中所占空间的高度，会影响文档流

3、中的其它元素位置。例如：负值负值图中，和都设置了元素和物理空间没有改变，占位空间高度为0空间没有改变，占位空间高度不变。再通过层级关系为：的值，值等于它们高度的负值。的值设置为，物理对和设置左偏移值。效果图：图3混合使用、和属性与属性布局相对定位元素的情况此情况，它们的值会产生累加的效果。在中所有的浏览器都使用外边距边界来完成偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。图中，是在图的基础上增加设置的值产生的效果，可见的值和的值产生了累加。偏移量-层级关系为：效果图：效果图：图4二、用绝对定位布局块级元素设置值：此属性值的设置，元素从文档流完全删除。仅使用、和属性布局绝对定位元

4、素的情况绝对定位的元素的偏移位置以最近的定位（包括相对定位和绝对定位）祖先元素作参照物。如果元素没有已定位（包括相对定位和绝对定位）的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是或元素）。注意：下参照物需设置宽度或高度和属性才可以正确的定位。设置元素为绝对定位元素后，元素的、和属性默认值不是0只是将元素脱离文档流。以下例子说明这个问题。在图中，将橘黄色的祖先元素设置为定位元素（即参照物），设为绝对定位，文档流由变为，可却没有移动到距离参照物值的位置上，可见的、和属性默认值不等于，它只是脱离了文档流而已。层级关系为：参照物没有设置为定位元素，不是参照物没有设置为定位

5、元素，不是参照物效果图：图5以最近的祖先定位元素为参照物的情况图中，设置成绝对定位元素，脱离了文档流，文档流由变为-以最近的定位祖先（蓝色框）为参照物。层级关系为：不是最近的祖先定位元素，不是参照物没有设置为定位元素，不是参照物参照物效果图：图6图7中，为改变参照物（橘色框）后的效果层级关系为：最近的祖先定位元素，参照物没有设置为定位元素，不是参照物没有设置为定位元素，不是参照物效果图：图7图8中，参照物为最顶级的元素情况。层级关系为：没有设置为定位元素，不是参照物没有设置为定位元素，不是参照物没有设置为定位元素，不是参照物效果图：效果图：仅使用属性布局绝对定位元素的情况此情况，的值不再对文档

6、流中的元素产生影响，因为该元此情况，的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。图中，使用属性布局相对定位元素。层级关系为：不是参照物没有设置为定位元素，不是参照物没有设置为定位元素，不是参照物效果图：divdivdivbox1box3margin-left:12lmargin-t(图9的情况下，前面没有兄弟节点，则的值会出现双倍边距，见图层级关系为：不是参照物没有设置为定位元素，不是参照物没有设置为定位元素，不是参照物效果图：图10混合使用、和属性与属性布局相对定位元素的情况属性和、属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图。例如：那么的偏移值为层级关系为：不是参照物不是参照物参照物效果图：图11绝对定位和相对定位的累加加效果不同，如果、属性和属性偏移的方向相反，、属性值有效，反方向的属性值无效，见图。层级关系为：不是参照物不是参照物参照物效果图：总结：相对定位的元素不会脱离文档流，占用文档流的空间，Left;Right;Top和Bottom属性与marg