Question

能否解释一下绝对定位和相对定位的区别

Answer 1

绝对定位其实也可以说是相对定位，只不过它相对的参考对象为文档区域的左上角，而相对定位则是相对于当前对象的父对象。如果相对定位的对象的父对象是body，并且body的margin属性为0，则可以认为这时的相对定位的对象和绝对定位的对象在定位上是等同的。 具体步骤：1．定位效果相同时的情况。 <style>body{margin:0}</style><div�0�2style="width:200;height:200;border:1px�0�2solid�0�2#000000; background:#dedede;position:absolute;left:50;top:30"></div> <div�0�2style="width:150;height:150;border:1px�0�2solid�0�2#666666; background:#eeeeee;position:relative;left:50;top:30"></div> 2．父对象不是body时的情况 <div�0�2align="right"> <div�0�2style="width:200;height:200;border:1px�0�2solid�0�2#000000; background:#dedede;position:absolute;left:50;top:30"></div> <div�0�2style="width:150;height:150;border:1px�0�2solid�0�2#666666; background:#eeeeee;position:relative;left:50;top:30"></div></div>技巧：在绝对定位时如果没有left，right，top，bottom等属性，则对象相当于相对定位，这样的对象同时具有绝对定位和相对定位的优点。 特别提示图2.1.4.1为本例第一段代码的运行效果，可以看到，绝对定位的层和相对定位的层的定位是一样的，坐标一点，出现的位置就一样。图2.1.4.2为第二段代码的运行效果，可以看到，相对定位的层的坐标值是相对于其父对象(居右对齐的DIV元素)，而绝对定位的坐标仍然是相对于文档区域的左上角。 图2.1.4.1�0�2两种定位效果相同时的情况 图2.1.4.2�0�2两种定位的层的明显区别 特别说明绝对定位一般用于可拖动对象，因为只有position的值为absolute的对象才可在客户端用脚本动态控制其定位。相对定位用于制作导航的下拉菜单居多，因为没有绝对定位产生的分辨率问题。控制对象是绝对定位还是相对定位，主要在于position属性的取值，它的取值及说明如表2.1.4.1所示。 表2.1.4.1�0�2position属性的可选值可选值说明static无特殊定位，对象遵循HTML定位规则(默认值)。 absolute将对象从文档流中拖出，使用�0�2left�0�2，�0�2right�0�2，�0�2top�0�2，�0�2bottom�0�2等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据�0�2body�0�2对象。而其层叠通过�0�2z-index�0�2属性定义。