深入浅出理解绝对定位和相对定位.docx
1、深入浅出理解绝对定位和相对定位 作者：佚名 文章来源：网络转载 点击数：1468 更新时间：7/14/2011 概要： 本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。 说明： 占位空间：元素在文档流中所占据的空间。 物理空间：元素本身所占据的空间。 下面分3种情况分别对相对定位和绝对定位进行讨论： 1. 只使用css第一组属性布局定位元素的
2、情况 2. 只使用css第二组属性布局定位元素的情况 3. 混合使用第一组和第二组属性的情况 图1为未定位时的初始效果，层级关系为：
3、p和bottom属性布局相对定位元素的情况 元素原本所占的占位空间仍保留，物理空间偏移。图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。层级关系为：
4、性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：margin-top:负值; margin-bottom:负值; 图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。层级关系为：
5、—– position:relative ; margin-bottom:-102px; margin-left:110px;
6、3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px = 110px – 30px)，层级关系为：
7、0px; 效果图： 图4 二、用绝对定位布局块级元素 设置position值：position:absolute; 此属性值的设置，元素从文档流完全删除。 1. 仅使用left、right、top和bottom属性布局绝对定位元素的情况 绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或 HTML 元素）。 注意：IE下参照物需设置宽度或高度bottom和right属
8、性才可以正确的定位。 设置元素为绝对定位元素后，元素的Left、 Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流。以下例子说明这个问题。 在图5中，将橘色box的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见box2的Left、 Right、Top和Bottom属性默认值不等于0，它只是脱离了文档流而已。层级关系为：
