html-css中绝对定位和相对定位-by 大家学分享站


层级关系为:

<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 参照物

效果图:

html-css中绝对定位和相对定位-by 大家学分享站

为改变参照物(橘色框)后的效果
层级关系为:

<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物

效果图:

html-css中绝对定位和相对定位-by 大家学分享站

参照物为最顶级的元素情况
层级关系为:

<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物

效果图:

html-css中绝对定位和相对定位-by 大家学分享站

 

仅使用margin属性布局绝对定位元素的情况
此情况,margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。
图9中,使用margin属性布局相对定位元素。
层级关系为:

<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物

效果图:

html-css中绝对定位和相对定位-by 大家学分享站

IE6的情况下,box2前面没有兄弟节点,则margin-left的值会出现双倍边距,见图10。
层级关系为:

<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物

效果图:

html-css中绝对定位和相对定位-by 大家学分享站

声明:大家学-卢卫湘|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - html-css中绝对定位和相对定位-by 大家学分享站


加vx: beyonds 备注:app上架 lwxshow