绝对定位和相对定位详解 蔚落 2022-08-20 07:25 259阅读 0赞 层级关系为： <div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物 <div—————————-没有设置为定位元素，不是参照物 <div———————- position:relative 参照物 <div box1 <div box2 ——–position:absolute; top:50px; left:120px; <div box3 效果图： ![2012072618164674.jpg][] 为改变参照物（橘色框）后的效果 层级关系为： <div ——————————— position:relative;最近的祖先定位元素，参照物 <div—————————-没有设置为定位元素，不是参照物 <div———————-没有设置为定位元素，不是参照物 <div box1 <div box2 ——–position:absolute; top:50px; left:120px; <div box3 效果图： ![2012072618180663.jpg][] 参照物为最顶级的元素情况。 层级关系为： <div ———————————没有设置为定位元素，不是参照物 <div—————————-没有设置为定位元素，不是参照物 <div———————-没有设置为定位元素，不是参照物 <div box1 <div box2 ——–position:absolute; top:50px; left:120px; <div box3 效果图： ![2012072618185065.jpg][] 仅使用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 效果图： ![2012072618431998.jpg][] IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。 层级关系为： <div ——————————— position:relative; 不是参照物 <div—————————-没有设置为定位元素，不是参照物 <div———————-没有设置为定位元素，不是参照物 <div box1 <div box2 ——–position:absolute; margin-top:50px; margin-left:60px; <div box3 效果图： ![2012072618451464.jpg][] [2012072618164674.jpg]: /images/20220731/4e15fb42394840368f4c22e0fce62215.png [2012072618180663.jpg]: /images/20220731/38666be06dbb43489bfef08541e3357d.png [2012072618185065.jpg]: /images/20220731/fc18113b735b46c68d0c01fa3960313c.png [2012072618431998.jpg]: /images/20220731/c6586f34039a427eac016fa0253374ee.png [2012072618451464.jpg]: /images/20220731/182844ebd857467b9d8034aeb62176a5.png
还没有评论，来说两句吧...