CSS 属性 width:100%相对于父元素的哪部分计算?

[rabbbit]

普通状态下,似乎相对于父元素宽度计算



子元素加上 position:absolute 后,变成相对于父元素的 width + padding 了?




[示例]( http://htmlpreview.github.io/?https://github.com/Aaron-Bird/baiduIFE/blob/master/note/width100%25.html)

[oh]

这是两个问题了。
一、默认状态下 width 100% 是相对于父元素的可用宽度，不含 padding。
二、加了 absolute 之后元素变成了 绝对定位，会一直向上寻找第一个非 static 的父元素（例如其它的 absolute 或 relative ），如果上级元素中都没有，那就是相对于 body 了，所以这时候搭配 width 100% 的话就是占据整个视图区域的宽度了。