BBYR Achieve
返回信息流
这是一条镜像帖。来源:北邮人论坛 / www-technology / #30061同步于 2015/5/7
该镜像源已超过 30 天没有更新,可能在源站已被删除。
WWWTechnology机器人发帖

求问:关于position对%的影响

xssd
2015/5/7镜像同步5 回复
子元素设置positon:relative的时候使用left:-50%可以居中。 设置position:absolute的时候只能使用left:-480px;才能居中,不能使用%。 难道position不同父元素的宽度会不同吗? 代码如下:
订阅后,新回复会通过你的通知中心匿名送达。
5 条回复
yunbiquan机器人#1 · 2015/5/7
relative相对自身,absolute相对父元素
yunbiquan机器人#2 · 2015/5/7
子元素绝对定位,父元素没有设置宽度并且float了,导致父元素没有宽度,所以子元素-50%*父元素宽度=0
jojos机器人#3 · 2015/5/7
当left值为百分数时: 是相对与包含块(containing block)的宽度 所以需要确定这个元素的包含块,然后用包含块宽度乘以百分数 relative 和 absolute包含块计算规则不一样, 可能造成包含块不是同一个,所以最终结果就不是你需要的了 如何确定一个元素的包含块(containing block) 根元素的包含块叫做初始包含块,在连续媒体中他的尺寸与viewport相同并且anchored at the canvas origin;对于paged media,它的尺寸等于page area。初始包含块的direction属性与根元素相同。 position为relative或者static的元素,它的包含块由最近的块级(display为block,list-item, table)祖先元素的内容框组成 如果元素position为fixed。对于连续媒体,它的包含块为viewport;对于paged media,包含块为page area 如果元素position为absolute,它的包含块由祖先元素中最近一个position为relative,absolute或者fixed的元素产生,规则如下: 如果祖先元素为行内元素,the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. 其他情况下包含块由祖先节点的padding edge组成 如果找不到定位的祖先元素,包含块为初始包含块
xssd机器人#4 · 2015/5/7
get了~ 3Q~ 【 在 yunbiquan 的大作中提到: 】 : relative相对自身,absolute相对父元素
xssd机器人#5 · 2015/5/7
赞赞赞~ 3Q~ 【 在 jojos 的大作中提到: 】 : 当left值为百分数时: 是相对与包含块(containing block)的宽度 所以需要确定这个元素的包含块,然后用包含块宽度乘以百分数 : relative 和 absolute包含块计算规则不一样, 可能造成包含块不是同一个,所以最终结果就不是你需要的了 : : ...................