转载网址：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;width:100px; height:800px; 2的样式为float:left; position：relative；margin-left:20px;width:50px; 2的位置在1的右边，距离120px
文章分类: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代码 <div style="position:static;width:600px;height:400px;background:#FFE4C4;"> position:static;width:600px;height:400px;background:#FFE4C4 <div style="position:relative;top:20px;left:10px;width:500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E </div> </div> Java代码 <div style="position:static;width:600px;height:400px;background:#FFE4C4;"> position:static;width:600px;height:400px;background:#FFE4C4 <div style="position:relative;top:20px;left:10px;width:500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E </div> </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代码 <div style="position:relative;width:600px;height:400px;background:#FFE4C4;"> position:relative;width:600px;height:400px;background:#FFE4C4 <div style="position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E </div> </div> Java代码 <div style="position:relative;width:600px;height:400px;background:#FFE4C4;"> position:relative;width:600px;height:400px;background:#FFE4C4 <div style="position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E </div> </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来代替。或者根据实际情况微调下。
转载于:https://www.cnblogs.com/lraa/archive/2013/01/11/2856673.html
