前段时间有个后端小伙伴被拉去写前端，出现了一个让他困惑不已的问题：明明给子元素设置了width:80%;可为什么还是子元素超出了父元素的宽度？

这里涉及到width属性的值的类型：width属性可以设置两种值，一种是绝对长度值，另外一种是相对长度值，相对长度值又根据参照物不同分为view height/view width和percentage。

所谓相对长度，那肯定会有参照物，其中vh/vw方式是参照窗口高宽确定的（浏览器参照），percentage方式是参照DOM元素确定的（页面内部参照）。但是问题就出现在这里，percentage参照的是哪个元素呢？是body、父级、还是兄弟元素？它又有哪些规则？

为了说明，我写了个简单的演示。

当然，我只写了几个组合，剩下的读者可以亲自试一试，实践出真知嘛。

顺便给出Mozilla对position属性的说明文档：Position – CSS: Cascading Style Sheets

（未完待续）