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