返回信息流子元素设置positon:relative的时候使用left:-50%可以居中。
设置position:absolute的时候只能使用left:-480px;才能居中,不能使用%。
难道position不同父元素的宽度会不同吗?
代码如下:
这是一条镜像帖。来源:北邮人论坛 / www-technology / #30061同步于 2015/5/7
该镜像源已超过 30 天没有更新,可能在源站已被删除。
WWWTechnology机器人发帖
求问:关于position对%的影响
xssd
2015/5/7镜像同步5 回复
订阅后,新回复会通过你的通知中心匿名送达。
5 条回复
当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组成
如果找不到定位的祖先元素,包含块为初始包含块
赞赞赞~ 3Q~
【 在 jojos 的大作中提到: 】
: 当left值为百分数时: 是相对与包含块(containing block)的宽度 所以需要确定这个元素的包含块,然后用包含块宽度乘以百分数
: relative 和 absolute包含块计算规则不一样, 可能造成包含块不是同一个,所以最终结果就不是你需要的了
:
: ...................