很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。

Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。



一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。

Relative，CSS中的写法是：position:relative;  他的意思是相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。



有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。


原文：
http://www.andymao.com/andy/post/40.html
引用通告：
http://www.andymao.com/andy/cmd.asp?act=tb&id=40

好!谢谢!

引用:

Relative，CSS中的写法是：position:relative; 他的意思是绝对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

明显的错误,它的意思是相对定位

笔误 ，谢谢提示！

补充一点：
position设为absolute的元素，同样可以成为其下级元素的“相对注册点”，也就是充当其实下级元素的relative。

到小毅老家一游

谢谢 LZ最近几篇文章都不错 比以前有营养多了 收藏！

为什么设置了元素相对定位于元素时设置了它的 right：0；却不能对齐于你元素的右边？

absolute可以层叠，relative不可以层叠！我现在就遇到这问题，真没办法解决吗？
我现在在做一个效果，想让这些层在一个div里显示一个隐藏其他这样的切换效果，
#e1 {VISIBILITY: visible;POSITION: relative;LEFT: 5px;width:525px;}
#e2 {VISIBILITY: hidden;POSITION: relative;LEFT: 5px;width:525px;}
#e3 {VISIBILITY: hidden;POSITION: relative;LEFT: 5px;width:525px;}
#e4 {VISIBILITY: hidden;POSITION: relative;LEFT: 5px;width:525px;}
#e5 {VISIBILITY: hidden;POSITION: relative;LEFT: 5px;width:525px;}
但当我用到absolute上面这些可以在同一个高度的DIV里切换，但是宽屏的时候错位了，
当我用到relative，上面这些层虽然不错位，但是却是从上至下排列的，有没其他办法解决啊？

加上expression((body.clientWidth-950)/2);就可以适应不同的分辨力了
950可以根据实际来改变

Absolute定位，在有父级容器的时候，是参照父级的原始点为原始点，而不是浏览器左上角为原始点，而且不受父级容器里面的内容以及padding所影响，是抽离的。

[ 本帖最后由 sgz52013 于 2008-8-14 11:40 编辑 ]

当父级容器设定为 relative 而子容器设定为绝对时  这个绝对是相对也父容器的 不是浏览器  拉

position:absolute; 的时候会以其上级到顶级最近的一个position:relative;的元素作为参考点。
因为body默认拥有position:relative;属性，所以很多情况下没有其他上级元素相对定位的时候就有了以浏览器的四个角作为参考一说了。

“一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。”

DW4时代就解决的问题了，我记得那是阿文po的文章，用2个DIV嵌套。
关键在于最外DIV设置position:absolute;不要设置TRBL属性
里面的DIV设置Position:relative;，可选择设置一下TRBL属性

复制内容到剪贴板

代码:

<居中的父元素 style="text-align:lef;">
<div style="position:absolute;">
<div style="position:relative;left:xxx;top:xxx;">
内容
</div>
</div>
</居中的父元素>

这样弄了之后哦，无论分辨率如何变，内容始终不会错位。

引用:

原帖由 lijun198296 于 2008-8-15 08:49 发表
position:absolute; 的时候会以其上级到顶级最近的一个position:relative;的元素作为参考点。
因为body默认拥有position:relative;属性，所以很多情况下没有其他上级元素相对定位的时候就有了以浏览器的四个角作为参 ...

感谢您的解释，解决了我的问题，哈~~
看来我得好好温习下定位问题了。

position:relative;的意思是给子对象建立了定位上下文。
有时候如果某个元素被另一个元素遮住了。那么也可以设置为这个，然后用z-index让它重见天日。

在IE6中有的时候，有时候绝对定位元素会出现“抖动”，那么给body显式设置以下position:relative;即可。

[ 本帖最后由 yoom 于 2008-9-9 11:24 编辑 ]

引用:

原帖由 lijun198296 于 2008-8-15 08:49 发表
position:absolute; 的时候会以其上级到顶级最近的一个position:relative;的元素作为参考点。
因为body默认拥有position:relative;属性，所以很多情况下没有其他上级元素相对定位的时候就有了以浏览器的四个角作为参 ...

有个小错误，body默认并不拥有position:relative;这个属性。
如果body不设置 position，那么绝对定位元素是相对于窗口左上角，而不是body左上角，因此必须显式设置下body的position:relative;。

z-index 范围是整数，而非自然数！

http://www.w3school.com.cn/htmldom/prop_style_zindex.asp

引用:

原帖由 raven 于 2006-5-28 13:42 发表
补充一点：
position设为absolute的元素，同样可以成为其下级元素的“相对注册点”，也就是充当其实下级元素的relative。

那意思是父元素设为sbsolute和relative都可以实现子元素的绝对定位，如果在一次嵌套呢

晕了，怎么一个人一个说法，到底哪个是正确的，以前会用，看完之后反而不会用了，还想着以前做的是不是都是错的

补充一点,在safari,也就是现在webkit渲染引擎,相对定位不支持负百分比的值.

话不多说，来实践下吧：
点一下，会弹出相关的内容
http://news.sohu.com/20080928/n259796474.shtml

最外层的POParea也是relative
pop下面的5个class都是absolute.
5个class:
title
totalcount
txt
user2
user---
其中user2(三名航天员的名字)和user（是一个flash）在一起会覆盖了，所以把user2的z-index:100放最前面。

[ 本帖最后由 shgen 于 2008-9-28 11:51 编辑 ]

本来已经很清晰这两个区别了，看了又糊涂了。

没必要“糊涂”。
记住：relative是给子元素建立定位上下文  就可以了。
还有就是当一个非绝对定位元素被一个绝对定位元素遮住的时候。
可以设置relative;然后z-index属性就可以显效。