|
#e# 2.仅使用margin属性布局绝对定位元素的情况 此情况，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 效果图：  图9 IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。 层级关系为： <div ——————————— position:relative; 不是参照物 <div—————————-没有设置为定位元素，不是参照物 <div———————-没有设置为定位元素，不是参照物 <div box1 <div box2 ——–position:absolute; margin-top:50px; margin-left:60px; <div box3 效果图：  图10 3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况 a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图11。 例如：margin-left:120px; left:-20px; 那么box2的偏移值为120px-20px=100px; 层级关系为： <div ———————————-不是参照物 <div—————————–不是参照物 <div———————–position:relative; 参照物 <div box1 <div box2 ———position:absolute; margin-left:120px; left:-20px; top:50px; <div box3 效果图：  图11 b.绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效，见图12。 层级关系为： <div ———————————-不是参照物 <div—————————–不是参照物 <div———————–position:relative; 参照物 <div box1 <div box2 ———position:absolute; margin-left:120px; right:10px; top:50px; <div box3 效果图：  图12 总结：
(责任编辑：熊猫蜀黍) |