一：绝对定位
position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
二：相对定位
position: relative;相对定位：相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
注意：position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display:inline; display:block都是无效的。
但是float在IE6下的双边距bug就是用display:inline; 来解决的。
position:relative不会隐式改变display的类型。
简单点说： 先说相对定位：跟它的名一样，相对嘛，要有一个参照物，但这个参照不是别的，是它自己呢，也就是说没设相对定位的位置，那你会问了，设没设都在那个位置为什么要设呢，因为只有设置了才能使 TOP,LEFT这些生效，也就是设了才能相对自己原来的位置偏移，原来的位置保留着，偏移后会把其它的层遮罩住。
再说绝对定位：在布局里不可能有绝对定位的，再怎么样都有一个参照位置的，绝对定位的参照位置就不像相对那样是自己了，至于是哪个，就看它的上级或上上级有没有定位了，也就是有没有position:relative;或position:fixed了，好像position:inherit;也行，前面两个可以，后面那个不设什么的不用也行，最好用position:relative;吧,转入正题，当要绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层，至于第几层你可以通过z-index:这个属性来设置
relative 表现的和 static 一样，除非你添加了一些额外的属性。
在一个相对定位（position属性的值为relative）的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和left 属性都可用。
absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。
如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，
并且它会随着页面滚动而移动。记住一个“positioned”元素是指position 值不是 static 的元素。
（1） 层级关系为：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————- position:relative 参照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果图：
（2） 为改变参照物（橘色框）后的效果层级关系为：<div ——————————— position:relative;最近的祖先定位元素，参照物<div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果图：
（3）参照物为最顶级的元素情况。层级关系为：<div ———————————没有设置为定位元素，不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果图：
（3） 仅使用margin属性布局绝对定位元素的情况此情况，（此时参照物就是原来的自己，relative参照物也是自己，但两者的区别在于relative原来的位置不会被其他div占据，） margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。 图9中，使用margin属性布局相对定位元素。层级关系为：<div ——————————— position:relative; 不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;<div box3效果图：
（1）和（4）定位同为绝对定位，但两者的区别是（1）是使用top left来控制位置；（4）是使用margin-top margin- left来控制位置， （1）的参照物是body，（2）的参照物是原来的自己。
（4） 是使用margin-top margin- left来控制位置时，参照物和position:relatIve一样都是自己，但当是相对定位时，即使位置移动，原来的位置是没有别的div占据的。
（5） IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。层级关系为：<div ——————————— position:relative; 不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;<div box3效果图：
z-index用法：z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
当你定义的CSS中有position属性值为absolute、relative或fixed，
用z-index此取值方可生效。
Absolute时
Relative时
Fixed
此属性参数值越大，则被层叠在最上面。上面三个CSS，将根据z-index的值决定谁在最上层！对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。