css百分比定位和百分比尺寸

百分比尺寸

• 子元素没有设置定位或定位为relative，则是百分比尺寸是相对于其父元素
• 子元素设置了绝对定位，则百分比尺寸是相对于最近的定位了的祖先元素，如果没有则相对于视窗。

百分比定位：

只有设置了定位的（relative,absolute,fixed）的元素才有left,top等属性。

子元素relative定位：百分比定位和百分比尺寸都是相对于父元素，无论父元素有没有定位

子元素absolute定位：百分比定位和百分比尺寸都是相对于最近的定位了的祖先元素，如果没有则相对于视窗。

总结

可以按照有没有脱离文档流来理解，无定位和相对定位都没有脱离文档流，其尺寸和定位都是相对于父元素（无定位元素不能设置定位），而不论父元素有没有定位；绝对定位的元素脱离了文档流，只有已定位了的元素才能作为其尺寸和位置的参照。