CSS中的绝对定位与相对定位

定位

（1）语法：

postion:static|absolute|relative|fixed

     静态   绝对       相对固定

绝对定位absolute：

将被赋予此定位方法的对象从文档流中拖出，使用left,right,top,bottom

等属性相对于其最接近的一个最具有定位设置的父级对象进行绝对定位，

如果对象的父级没有设置定位属性，则依据body对象左上角作为参考定位。绝对定位对象可层叠，层叠顺序通过z-index属性控制，z-index值为无单位的整数，大的在最上面，可以有负值（但FF不支持负值）

相对定位：

对象不可层叠，依据left,right,top,bottom等属性在正常文档流中偏移自身位置，同样可以用z-index分层设计。

自私的相对定位：

相对定位的最大特点：自己通过定位跑开了还占用着原来的位置，不会让给他周围的注入文本流之类的对象。相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以它自己本身所在位置偏移的（相对对象本身偏移）

在用相对定位和绝对定位的时候，有一种情况是它们的定位值用到了负值，则对象可沿相反方向移动。

第一种层级关系：

<div ————position:relative;不是最近的祖先定位元素，不是参照物

<div————没有设置为定位元素，不是参照物

<div————position:relative;参照物

<div box1

<div box2————position:aboulute;top:50px;120px;

<div box3

效果图：

改变参照物后：

<div ————position：relative;最近的祖先定位元素，参照物

<div ————没有设置为定位元素，不是参照物

<div————没有设置为定位元素，不是参照物

<div box1

<div box2————position:absolute;top:50px;left:120px;

<div box3

参照物为最顶级的元素情况：

<div————没有设置为定位元素，不是参照物

<div————没有设置为定位元素，不是参照物

<div————没有设置为定位元素，不是参照物

<div  box1

<div  box2————position:absolute;top:50px;left:120px;

<div  box3

仅使用margin属性布局绝对定位元素的情况

此情况，margin-bottom和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。

此外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。

层级关系为:

<div ————position:relative;不是参照物

<div————没有设置为定位元素，不是参照物

<div————没有设置为定位元素，不是参照物

<div  box1

<div  box2 ————position:absolute;margin-top:50px;margin-left:120px;

<div box3

IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距