相对定位与绝对定位

《相对定位与绝对定位》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

2、

3、占位空间还是存在的。层级关系为：

4、，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。层级关系为：

5、;效果图：图33.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px=110px–30px)层级关系为：

6、2——-position:relative;margin-bottom:-102px;margin-left:110px;flet:-30px;  

7、作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或HTML元素）。注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。设置元素为绝对定位元素后，元素的Left、Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流。以下例子说明这个问题。在图5中，将橘黄色的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见b

8、ox2的Left、Right、Top和Bottom属性默认值不等于