请教CSS中的position:relative;的作用。

来源：百度文库编辑：神马文学网时间：2024/04/27 22:18:56

请教CSS中的position:relative;的作用。

悬赏：40 发布时间：2008-10-29 提问人：qichunren (架构师)

对于css中的position:relative;我始终搞不明白它是什么意思，有什么作用？

对于position的其它几个属性，我都搞懂了
引用
static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
fixed : 　IE5.5及NS6尚不支持此属性

对于文档中所说的几个属性，除了relative，其它的一试，就效果出来了，对于个relative，真是难理解。

要说是相对定位嘛，也不是。

对于页面中一个static的div#demo，我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该是用这个position:relative这个吧，然后再加上top,right给限制一下。
我理解得没有错吧?

不过在现实开发中，我却常常得不到预期的效果。我觉得应该是我对这个属性还没有理解透。现在我想完全掌握这个，就像position:absolute那样地掌握它，想怎么弄html元素就怎么弄HTML元素。
请理解这一点的朋友们给讲讲，或者给点资料，链接之类的也可以。

谢谢您们。
问题补充：
谢谢您提供的链接，不过它没有深度，我希望得到position:relative的详细的理解。
问题补充：
reeze，你说的这一点很好。
不过，对于声明了这属性的本身的元素的定位呢？它自身的top，left,right,bottom有什么作用？
你所讲的是relative的子元素的行为啊。我想知道它自身的一些信息。
问题补充：
就没有大大给点根本的解释吗？

采纳的答案

2008-11-02 ice-cream (初级程序员)

"对于页面中一个static的div#demo，我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该是用这个position:relative这个吧，然后再加上top,right给限制一下。
我理解得没有错吧? "

首先对你疑惑的地方，我先解答一下：
position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static）

如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。

absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对定位，那么#sub的绝对定位就是相对于body来定位的。

relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。

另：relative 不脱离文档流，absolute 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流。

写了个例子如下：

Html代码

>
xmlns="http://www.w3.org/1999/xhtml">

http-equiv="content-type" content="text/html; charset=utf-8">

position

type="text/css">

static: 默认值。无特殊定位，对象遵循HTML定位规则

absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义

fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置

提问者对于答案的评价：
感觉你的理解不错，谢谢。
也谢谢其他的JEer。

问题答案可能在这里 → 寻找更多解答

怪异模式下 absolute 在IE6,7下的bug
关于ｄｉｖ的定位问题讨论
offsetXx 探讨
div高度百分比的问题
绝对定位的div中嵌套绝对定位的div

其他回答

我也是新手，给您点资料看看，不知道能不能帮上你

http://www.w3school.com.cn/tiy/t.asp?f=csse_position_relative

http://www.w3school.com.cn/css/css_positioning.asphcq989 (初级程序员) 2008-10-29 我的理解是这样子的。

如果你声明一个div的position：relative的话，就表示它的子内容如果 Position:absolute;的话，他的绝对位置就是相对他最近上一级声明了postion:relative的对象来绝对定位。否则的话就会使相对整个页面来绝对定位的。

声明relative就是说你如果要绝对定位就相对我来绝对定位吧。reeze (初级程序员) 2008-10-30 引用不过，对于声明了这属性的本身的元素的定位呢？它自身的top，left,right,bottom有什么作用？
你所讲的是relative的子元素的行为啊。我想知道它自身的一些信息。

应该是这样的，他自身的top，left。。。将会从原来的位置偏移出去，偏移的位置就是相对于它自己原来在流里面的位置。但是其他的属性，比如margin不会随着偏移而偏移吧。。
reeze (初级程序员) 2008-10-30 看一下这个

Div + CSS Example, Wayhome's Blog

　position: absolute;

　top: 5px;

　right: 20px;

　

position: absolute;

left: 20px;

bottom: 10px;

　position: absolute;

　top: 5px;

　left: 5px

　position: relative;

　left: 150px;

　

　width: 300px; height: 50px;

　　　 padding: 20px 0 0 20px;
　　

position: absolute;

　　　　position: relative;

　　 left: 200px;

　　

　　 width: 300px;

　　 height: 300px;

　　

　　　 position: absolute;

　　　 top: 20px;

　　　 right: 20px;

　　　 position: absolute;

　　bottom: 20px;

　　left: 20px;

　　

本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/13256.htmhcq989 (初级程序员) 2008-10-31 我谈谈我的理解:
1.首先不要用层叠这个词，容易把关系搞混
2.absolute是受parentNode的position影响的
parentNode的position不是relative,那absolute的绝对对象是针对body的
parentNode的position 是relative,那absolute的绝对对象是针对parentNode的
也就是说absolute的绝对是有参照Node的
3.对于复杂的position关系，要从parentNode的position的设置逐次的推下来
4.relative的node的尺寸会影响parentNode的尺寸,也就是说relative即定位也占位
absolute的node的尺寸不影响parentNode的尺寸,也就是说absolute只定位不占位
5.z-index只对absolute的node有效achun (高级程序员) 2008-11-02 relative是相对定位。这里的相对是指相对于此元素在正常情况下在文档中的位置，而且它并未被抽离文档流。未被抽离的意思是它还对后面的元素有影响，如果被抽离了，就不会对后面的元素有影响了。话多无用，亲自动手试试就理解了。对比一下相对定位前后的位置偏移量，及相对定位时与绝对定位时后面元素的变化。落魄轻狂 (初级程序员) 2008-11-05 一下内容摘选于:http://www.blueidea.com/tech/web/2007/4601.asp 有时间自己去详细看看,详细你会明白的.
1．定位的专业解释
相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

2．定位的形象解释
自私的相对定位（relative）
相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以自己本身所在位置偏移的（相对对象本身偏移）。再拿前边作比如来解，那么此时西瓜似乎是有魔法的，如果西瓜通过相对定位在水桶中偏移了你会看到一个现实生活中不存在的现象：水中有一个地方水凹下去了，周围的水不能填补它，西瓜看起来在旁边，如果搅动一下桶中的水，那个凹的位置会发现改变（文本流对相对定位对象还存在影响），但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响，因为对象并没有真正脱离文本流，就像有两个人在同一层楼水平移动的过程中会有碰头的机会。

实例强化对定位属性的理解
相对定位对象会占据它原来位置，在下面实例中，没有设定相对定位前，绿色小盒子是在蓝色盒子左上角的，之前也设定了绿色小盒子的浮动方式为左浮动，可以看到文本环绕在它右边，但是后来用相对定位方法把绿色小盒子重定位到外面去了，它还占着自己原来位置，因为你还可以看到文本流没有发生自动填补流动。因此这种直接的相对定位方法较少用，因为重定位对象后原来位置空了一块。相对定位常与绝对定位结合用，一般是给父级设定相对定位方式，子级元素就可以相对它进行方便的绝对定位了（请注意看后面的实例）。
Xml代码

>
xmlns="http://www.w3.org/1999/xhtml">

http-equiv="Content-Type" content="text/html; charset=gb2312" />

相对定位对象会占据原有位置

type="text/css">

[相对定位对象会占据原有位置]现在绿色小盒子是以子盒子形式存在蓝色大盒子中，并设定了浮动方式为左浮动，所以这些文字能环绕在它右边，当绿色小盒子用相对定位方法重定位到外边去了，文字还是不能流入它的区域，即左上角空白区域，那是因为绿色盒子还占用着它原来位置。

相对定位的对象不可以重叠。这一点也许比较难理解，先来这样理解吧，因为相对定位的对像没有脱离文本流，就像两个还是住在同一层楼的人，任何时候，他们脚下踩的地方不可能被另一个人踩着的，如果可以就意味着两个人共享一块地方了。在下面的实例中，两个小盒子都刚好排在大盒子上方，所以在大盒子中输入的文字被挤到了下面。上面两个盒子我再用相对定位的方法对调了它们的位置，当前它们下方的空间其实不是自己的，也正因为它们没有重叠，所以盒子上方还是有两个盒子占用的空间，下面文字无法向上流动（我已对盒子设定了浮动属性的了，如果不设定，即使有空间文本也不会往上流，上面盒子是块级元素，会独立占据一行）。
Xml代码

>
xmlns="http://www.w3.org/1999/xhtml">

http-equiv="Content-Type" content="text/html; charset=gb2312" />

相对定位对象不可层叠

type="text/css">

我家在左边

我家在右边

相对定位对象是在正常文本流中移动的，所以它的存在还是会影响文本流的布局，如果是绝对定位，这些文本应向上流入上方两个盒子的底部了。

给包含块一个高度，或者说给定位对象的父级设定一个高度。不然也许显示的结果并不是你想要的。在下面的例子中，如果你本意要实现下面效果：把小盒子在父盒子中的左上角垂直往下偏移，上方留出一块区域，如果你删除了box1的高度会怎么样呢？自己测试一下吧。

Xml代码

>
xmlns="http://www.w3.org/1999/xhtml">

http-equiv="Content-Type" content="text/html; charset=gb2312" />

给包含块一个高度

type="text/css">

放置相对定位对像到可视区外不会出现滚动条。此现象很好理解，因为相对定位对象原来位置没有变，原来位置没有出去滚动条就不会出现。在下面实例中，如果你缩小浏览器窗口，相对定位的对象还会出现完全消失的情况呢。
Xml代码

>
xmlns="http://www.w3.org/1999/xhtml">

http-equiv="Content-Type" content="text/html; charset=gb2312" />

放置相对定位对像到可视区外不会出现滚动条

type="text/css">

虚线框是右边盒子原来的位置，即用了相对定位后，把对象重新定位到了右边，但对象的位置其实还在这里，或者说对象实际上并没有越出浏览器可视区域，所以不会出现滚动条。
我说过相对定位的的盒子原有位置是不会被占用的，但我为什么可以在这里写说明呢，这是因为我用了绝对定位，我只是为了方便说明才这样做的，请不要误解了。

定位的特殊值情况。如果定位设置是这样的：position:relative ，right:200px， left:10px会出现什么情况呢？一边叫对象向右偏移10px，另一边又叫对象向左偏移200px，到底是听那边的呢，还是那个先，那个后呢。针对这种矛盾情况，CSS规定只听左边的left，而右边怎么设置都被重定为-left,即-left =right。上下值top与bottom矛盾的话，就以top为准，所以在下面的实例中，你如何改变right的值，对象位置不会发生改变的。
Xml代码

>
xmlns="http://www.w3.org/1999/xhtml">

http-equiv="Content-Type" content="text/html; charset=gb2312" />

定位的特殊值情况

type="text/css">

综合实例见证定位的魅力
Xml代码

>
xmlns="http://www.w3.org/1999/xhtml">

http-equiv="Content-Type" content="text/html; charset=gb2312" />

相对定位和绝对定位实例--作者：唐国辉

type="text/css">

请教CSS中的position:relative;的作用。