转载：CSS里面position：relative与position：absolute

转载网址：http://blog.sina.com.cn/s/blog_5032677c0100q60d.html

position：absolute这个是绝对定位
是相对于浏览器的定位。

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

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

比如：<div class="1"></div><div class="2"></div>

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

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

DIV的Position属性和嵌套显示

文章分类:Web前端

1.前言
我们在利用div+css进行布局时，常常被div的位置弄的焦头烂额，很多人甚至放弃了div而直接用table。这里一如既往的推荐使用div布局， 其实我们只要掌握了div的position属性和div的float属性，布局是非常灵活的，这里详细说一下div的position，没想象中那么简 单，也没想象中那么复杂。

2.position的四种取值
static:static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定
relative:relative 就是相对元素static定位时的位置进行偏移，如果指定static时top是50象素，那么指定relative并指定top是10象素时，元素实际top就是60象素了。
absolute:absolute绝对定位，直接指定top、left、right、bottom。有意思的是绝对 定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其Position是 absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素。标准是说只需要指定 left和right，width可以自动根据容器宽度计算出来，可惜ie不支持。
fixed:fixed才是真正的绝对定位，其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，也就是说永远可以看到，这个做一些彩单的时候可以用。可惜的是ie还不支持

3.relative,absolute,fixed需要指定具体位置
relative,absolute,fixed如果不指定它的top,left等属性，那么它的position实际上依然是static。使用了relative,absolute,fixed就必须指定具体的位置。

4.关于DIV的嵌套
我们设定外层div的名字为div1,内层div的名字为div2

4.1如果div1的position是static，说明div2位置是出现在哪里就显示在哪里。如下图：

div1的position是static，div2的position是absolute，这样div2就不受外层div的约束了。如果div2的 position是relative，top:20px;但实际上，div2距离顶端是36px(大于20px)，不知道是不是浏览器的bug，ie和 Firefox都如此。
代码如下

Java代码

1. <div style="position:static;600px;height:400px;background:#FFE4C4;">  
2. position:static;600px;height:400px;background:#FFE4C4  
3.     <div style="position:relative;top:20px;left:10px;500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;500px;height:350px;background:#D2691E  
4.     </div>  
5. </div> 

Java代码

1. <div style="position:static;600px;height:400px;background:#FFE4C4;"> 
2. position:static;600px;height:400px;background:#FFE4C4 
3.     <div style="position:relative;top:20px;left:10px;500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;500px;height:350px;background:#D2691E 
4.     </div> 
5. </div> 

4.2如果div1的position是relative，这样div2的position不管是relative还是absolute，显示的效果基本是一样的，都是内层div针对外层div的位置。如下图：
不过这两者还有有区别的，如两张图片。如果div2的position是relative，top:20px;但实际上，div2距离顶端是36px(大 于20px)，但如果div2的position是absolute，top:20px;div2距离顶端的高度就精确的是20px。
代码如下

Java代码

1. <div style="position:relative;600px;height:400px;background:#FFE4C4;">  
2. position:relative;600px;height:400px;background:#FFE4C4  
3.     <div style="position:absolute;top:20px;left:10px;500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;500px;height:350px;background:#D2691E  
4.     </div>  
5. </div> 

Java代码

1. <div style="position:relative;600px;height:400px;background:#FFE4C4;"> 
2. position:relative;600px;height:400px;background:#FFE4C4 
3.     <div style="position:absolute;top:20px;left:10px;500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;500px;height:350px;background:#D2691E 
4.     </div> 
5. </div> 

4.3如果div1的position是absolute，这样div2的position也是absolute，那么div2的位置实际上是一个相对位置。如下图：

5.如果div的position是fixed，就不用说了，其位置永远相对浏览器位置来计算。

6.问题
从div的嵌套可以看出：position:relative，top:20px;无论是上级div的position是什么属性，实际上距离顶端总是大于20px。解决方案也很简单，不用top而用margin来代替。或者根据实际情况微调下。