《绝对定位,与相对定位的区别》由会员分享，可在线阅读，更多相关《绝对定位,与相对定位的区别（11页珍藏版）》请在金锄头文库上搜索。
1、概要：本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。 以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距） 对定位块级元素进行布局的方法。（本文的示例，请看这个附件demo。）说明：占位空间：元素在文档流中所占据的空间。物理空间：元素本身所占据的空间。下面分3种情况分别对相对定位和绝对定位进行讨论：1只使用css第一组属性布局定位元素的情况2只使用css第二组属性布局定位元素的情况3混合使用第一组和第二组属性的情况图1为未定位时的初始效果，层级关系为：vdivdiv boxlvdiv box2vdiv box
2、3效果图：bnx1box2bnx3图1一、用相对定位布局块级元素元素设置 position 值： position:relative此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它 元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）1仅使用left、right、top和bottom属性布局相对定位元素的情况 元素原本所占的占位空间仍保留，物理空间偏移。图2中，设置元素的left和top的值，对box2进行布局，可以发现除了 box2偏移之外, 其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。层级关系为：vdivvdiv boxlvdiv
3、box2positi on: relative ; top:-60px; left:80px;vdiv box3效果图：2仅使用margin属性布局相对定位元素的情况用margi n-bottom属性和marg in-top属性设置负值可以改变文档流中所占空间的高度，会 影响文档流中的其它元素位置。例如：margi n-top:负值;marg in-bottom :负值图3中，boxl和box2都设置了元素margin-bottom的值，值等于它们高度的负值。boxl 和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0,物理 空间没有改变，占位空间高度
4、不变。再通过margin-left对box2和box3设置左偏移值。 层级关系为：positi on: relative ; marg in-bottom:-102px;positi on: relative ; marg in-bottom:-102px; marg in-left:110px; positi on: relative ; marg in-bottom:0px; marg in-left:220px;vdivvdiv boxlvdiv box2vdiv box3效果图：margin-left:110px;margsn-lefl:22npx;图33混合使用left、right、
5、top和bottom属性与margin属性布局相对定位元素的情况此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。图4 中, box2是在图3的基础上增加设置left的值产生的效果，可见marg in-left的值和left 的值产生了累加。（偏移量:80px = 110px - 30px）层级关系为：vdivvdiv boxlpositi on: relative;marg in-bottom:-102px;vdiv box2positi on: relative;marg in-bottom:
6、-102px;marg in-left:110px; flet:-30px;vdiv box3positi on: relative;marg in-bottom:0px; marg in-left:220px;效果图：flet:-30pxmargin-left: 11marg5n-left:22Sjpx;二、用绝对定位布局块级元素 设置 position 值：position:absolute;此属性值的设置，元素从文档流完全删除。1仅使用left、right、top和bottom属性布局绝对定位元素的情况绝对定位的元素的偏移位置以最近的定位（包括相对定位和绝对定位）祖先元素作参照物。如 果
7、元素没有已定位（包括相对定位和绝对定位）的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或HTML元素）。注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。设置元素为绝对定位元素后，元素的Left、Right、Top和Bottom属性默认值不是0只 是将元素脱离文档流。以下例子说明这个问题。在图5中，将橘黄色的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见box2的Left、Right、Top和Bottom属
8、性默认值不等于0,它只是脱离了文档流而已。 层级关系为：vdivposition:relative 参照物vdiv没有设置为定位元素，不是参照物div没有设置为定位元素，不是参照物div box1div box2absolutediv box3效果图：图5以最近的祖先定位元素为参照物的情况图6中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为 box1-box3, box2以最近的定位祖先（蓝色框）为参照物。层级关系为：divposition:relative;不是最近的祖先定位元素，不是参照物div没有设置为定位元素，不是参照物divposition:re
9、lative 参照物vdiv boxlvdiv box2positi on: absolute; top:50px; left:120px;vdiv box3效果图：图6图7中，为改变参照物（橘色框）后的效果层级关系为：vdivpositi on:relative;最近的祖先定位元素，参照物vdiv没有设置为定位元素，不是参照物div没有设置为定位元素，不是参照物vdiv boxlvdiv box2positi on: absolute; top:50px; left:120px;vdiv box3效果图：图8中，参照物为最顶级的元素情况。层级关系为：vdiv没有设置为定位元素，不是参照物vd
10、iv没有设置为定位元素，不是参照物div没有设置为定位元素，不是参照物div boxldiv box2positi on: absolute; top:50px; left:120px;div box3效果图：图82仅使用margin属性布局绝对定位元素的情况此情况，marg in-bottom和margi n-right的值不再对文档流中的元素产生影响，因为该元素 已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置 上偏移参照物。图9中，使用margin属性布局相对定位元素。层级关系为：vdivposition:relative;不是参照物vdiv没有设置为定位
11、元素，不是参照物div没有设置为定位元素，不是参照物div boxldiv box2positi on: absolute; marg in-top:50px; marg in-left:120px;div box3效果图：图9IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。 层级关系为：divposition:relative;不是参照物div没有设置为定位元素，不是参照物div没有设置为定位元素，不是参照物div box1div box2positi on: absolute; marg in-top:50px; marg in-left:6
12、0px;div box3效果图：图103混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会 产生累加的效果，见图11。例如：margin-left:120px; left:-20px;那么 box2 的偏移值为 120px-20px=100px;层级关系为：vdiv不是参照物vdiv不是参照物divposition:relative;参照物div box1div box2positi on: absolute; marg in-left:120p
13、x; left:-20px; top:50px;div box3效果图：nargin-flet:12|pX|IMleft:-20ptII I图11b.绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属 性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效， 见图12。层级关系为：vdiv不是参照物vdiv不是参照物vdivposition:relative;参照物vdiv box1div box2positi on: absolute; marg in-left:120px; right:10px; top:50px;vdiv box3效果图：nargin-f1et:12GpX|iii图12 总结:相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom 属性与margin属性混合使用会产生累加效果。 绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和 Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属 性值无效。 绝对定位的元素以最近的定位祖先元素为参照物。本文出自：
