子元素没有设置定位其尺寸设置百分比参照的对象是 该子元素的父级元素;
子元素绝对定位后,其尺寸设置为百分比参考的对象是 该子元素设置了定位(这里的定位包括绝对定位相对定位和固定定位)的祖先元素(一层一层往上找,直到找到定位的祖先元素停止)若没有找到目标,则参照的是浏览器窗口
子元素不设置定位,父元素也不设置定位
可以看到子元素尺寸参照的是父级元素
在上面代码的基础上,给黄色盒子设置定位:
看到和上面结果一样说明子元素没有设置定位,不会理睬设置了定位的祖先元素
接着在上面的基础上,给粉色的盒子设置绝对定位:
看到子元素(粉色盒子)的宽度和设置了定位的祖先元素(黄色盒子)的宽度一样。
接着将祖先元素的定位去掉。代码如下:
子元素(粉色盒子)的宽度为浏览器的宽度(因为其祖先元素没有定位)
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。