对CSS中绝对定位的浅析

绝对定位是指原来的占位空间而言
如果绝对定位被指定，那么它将失去占位空间
如果他的top和left未指定大小，那么他将是原来的占位空间的位

置。但是对于其他元素来说，其他元素会认为他的占位空间已消

失。
他的参照物是离他最近的指定定位的父级元素
例如
<div ——————————— position:relative;最近的祖先

定位元素，参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; top:50px;

left:120px;
      <div box3

 

此情况，margin-bottom 和margin-right的值不再对文档流中的

元素产生影响，因为该元素已经脱离了文档流。另外，不管它的

祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参

照物。
例如
<div ——————————— position:relative; 不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; margin-top:50px;

margin-left:120px;
      <div box3

 

相对定位是相对原来占位空间而言；

 

 

总结：

相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。
绝对定位的元素以最近的定位祖先元素为参照物。