absolute、relative详解

 

     1、当Position属性值为Relative时
       对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置。
       Top的值表示对象相对原位置向下偏移的距离，bottom的值表示对象相对原位置向上偏移的距离（两者同时存在时，只有Top起作用）；
       left的值表示对象相对原位置向右偏移的距离，right的值表示对象相 对原位置向左偏移的距离（两者同时存在时，只有left起作用）。

      参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。
   2、当Position属性值为absolute时
       对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来。
       Top的值表示对象上边框与浏览器窗口顶部的距离 ，bottom 的值表示对象下边框与浏览器窗口底部的距离 （两者同时存在时，只有Top起作用）。如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位 置不变。
      left的值表示对象左边框与浏览器窗口左边的距离 ，right的值表示对象右边框与浏览器窗口右边的距离 （两者同时存在时，只有left起作用）。如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。

     设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。

     TRBL属性（TOP、RIGHT、BOTTOM、LEFT）只有当设定了position属性才有效。
     如果父级没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位 ；如果父级设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。

     在Position属性值为absolute的同时，如果有一级父对象的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。

     声明一个div的position：relative，它的子内容div的Position:absolute，子内容div的绝对位置就是相对它最近上一级声明postion:relative的对象来绝对定位。否则的话就会使相对整个页面来绝对定位的。
     声明relative就是说你如果要绝对定位就相对我来绝对定位吧。