absolute与relative的运用

Div CSS 进行网页布局，适当地运用 absolute 与 relative，能给布局带来意想不到的效果和方便，达到事半功倍…

　　详细讲解两者的关系，需要配合例子，请先看例子：

以下是引用片段：

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;

1

2

3

4

5

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;

　　absolute：绝对定位，CSS 写法“ position: absolute; ”，它的定位分两种情况，如下：

　　1. 没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点，上面例子红 色部分(父级黄色区域有 Padding 属性，“坐标原始点”和“内容区域原始点”不一样)。

　　2. 有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下：

　　(1). 父级没 position 属性，浏览器左上角(为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定，上面例子绿色部分。

　　(2). 父级有 position 属性，父级的“坐标原始点”为原始点，上面例子浅蓝色部分。

　　relative：相对定位，CSS 写法“ position: relative; ”，参照父级的“内容区域原始点”为原始点，无父级则 以 Body 的“内容区域原始点”为原始点，位置由 Top、Right、Bottom、Left 属性决定，且有“撑开或占据高度”的作用，上面例子 橙色部分。

　　通过上面的例子和讲解，相信熟练运用 absolute 与 relative 并不是一件很困难的事，我们周围有不少关于 absolute 与 relative 的好例子，比如“网易163免费邮”首页(http://mail.163.com)，里面就有大量的运用。

例子代码在 IE5.5、IE6、FF1.5、Opera9 测试通过。

position 有三个值，static（静态）、relative（相对）、absolute（绝对）；由于static是所有页面元素的默认值，因此设置元素的定位类 型时几乎不用这个值，除非用于覆盖之前的定义。
对于后两者，一般应用：在一个相对定位的元素里面放置一个绝对定位的元素，如图：


子元素B可以通过top、right、bottom、left来精确定位，定位的参考目标就是其具有相对定位属性的父级元素A；并且设置这些偏移后，产生 的空隙会被后面的元素填充（如果后面的元素足够尺寸的话）。由于B元素具有absolute定位属性，相当于从文档流中抽取出来，浮动在原平面排版上，形 成“层”，如果有多个“层”，层与层之间就必然会有谁覆盖谁，谁在上谁在下的竞争关系，因此，为解决这个竞争，就产生了z-index（空间坐标系的Z 轴）属性，谁的值大，谁就在上面。另外，如果父级元素A没有设置relative，那么B元素就会以body标签当作参考点。

对于具有position:relative属性的元素A，其top、right、bottom、left四个方向的位置偏移就会以该元素的原来位置作为 参考点，而不是像上面说的，以具有relative定位属性的父级元素或body作为参考点。在设置了偏移后产生了空隙，其周围的元素并不会填充这些空 隙，即使它们足够尺寸( 演示)。值得注意的是， 此时元素A的 margin，margin将作用于该元素的原来位置，由于原位置产生偏移，该元素的最终位置将是margin与top、right、 bottom、left共同作用后的位置，并且其周围元素的位置也将产生影响。

回过头来再看看 relative 里面的absolute，比如上面的A、B两个元素，如果两个元素都设置了top、right、bottom、 left，对于元素B来说，其位置偏移的参考点是元素A偏移后的位置，不是元素A的原位置，同样， 如果元素 B有margin，其参考点也是元素A偏移后的位置，这点很重要，这才是 absolute的概念( 演示)。

 

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来设定上下关系的，一定是子级在上父级 在下。

 

 

用Div+CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性 等。 Position属性有四个值： static、fixed、absolute和relative，后面两个在布局中的定位里是经常用到的，顾名思义，absolute是指绝对定位，即将 对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，而其层叠通过z-index属性定义。此时对象不具有边距，但 仍有补白和边框。ralative是指相对定位，就是依据left，right，top，bottom等属性在正常文档流中偏移位置。
但是，怎么个绝对法，又怎么个相对法呢？以前我一直没有仔细去研究它，到具体应用时有时会有点迷糊，我相信很多朋友也会有这样的问题。今天我特意测试 了一下，得出了以下结论：
1、当Position属性值为Relative时
对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置
Top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向上偏移的距离
两者同时存在时，只有Top起作用。
left的值表示对象相对原位置向右偏移的距离
right的值表示对象相对原位置向左偏移的距离
两者同时存在时，只有left起作用。
2、当Position属性值为absolute时
对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来
Top的值表示对象上边框与浏览器窗口顶部的距离
bottom的值表示对象下边框与浏览器窗口底部的距离
两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。
left的值表示对象左边框与浏览器窗口左边的距离
right的值表示对象右边框与浏览器窗口右边的距离
两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。
在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值 为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。

========================================================

position：absolute这个是绝对定位；
是相对于浏览器的定位。
比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

比如：


当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position：relative；margin-left:20px;width:50px;
2的位置在1的右边，距离120px

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