From：http://www.cnblogs.com/wiseblog/articles/4352007.html
relative(相对定位) 对象不可层叠、 不脱离文档流，参考自身静态位置通过 TRBL 定位，并且 可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流，通过TRBL定位. 使用absolute绝对定位时,冒泡最近的带有 absolute/ relative的 父级，如没有则冒 泡至body的TRBL为止， 可z-index进行层次分级。
1.可以位移的元素 （相对定位）
在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，也可以通过margin来让元素产生位置移动。但事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过 TRBL 针对一个相对定位的元素所产生的。我们看下面的图：
width:200px; height: 50px;
padding:25px; margin:25px;
border:25px solid #333;
position:relative; top: 50px; left: 50px;
}
如上所述：相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这就好比一个打工的人他到了外地，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来，如果希望文本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位，如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素，使之处在任何一个位置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。看下图：
上面说的是单一的绝对定位，而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固定在网页中的某一个点，当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动，而并且是因定在网页的某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为坐标起始点。
虽然是如此，但是这个坐标原点却并不是父级的坐标原点，这是一个很奇怪的坐标位置。我们看一下模型图示：
我们看到，这个图中父级为黑灰色区块，子级为青色区块。父级是相对定位，子级是绝对定位。子级设置了顶部位移50个像素，左倾位移50个像素。那么我们看，子级的坐标原点并不是从父级的坐标原点位移50个像素，而是从父级块的padding左上边缘点为坐标起始点（即A 点）。而父级这里如果要产生位置移动，或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。
这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话，相信看完对这里对定位的解释一定可以把定位使用得随心所欲。
4.总在视线里的元素 （固定定位）
position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。
则：不会随浏览器流动条的滚动而滚动，始终保持自己在浏览器在视框中的位置：
例：
<html>
<head>
<title></title>
</head>
<body style="border: 1px solid blue;height: 100%">
<div style="position:absolute;top:500px;left:60px;height:2000px;background-color:yellow;">
This tall div is absolutely positioned 500 pixels from the top and 60 pixels from the left of its containing block.
</div>
<div style="position:fixed;top:100px;left:60px;width:180px;background-color:red;">
这个是固定的DIV
</div>
</body>
</html>
2242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
