#书摘 #css #前端
《CSS 世界》流的破坏与保护——关于overflow
「此时，有人可能会惊呼：什么？设置 height:0 同时 overflow:hidden？那岂不是里面所有元素都被剪裁看不见啦？如果是普通元素确实会如此，但是对于 absolute 绝对定位以及 fixed 固定定位元素，规则要更复杂！」


1. overflow 对absolute 元素的剪裁规则用一句话表述就是：绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候。
上面这句话是官方文档的直译，似乎还是有些拗口，我们再换一种方法表述就是：如果overflow 不是定位元素，同时绝对定位元素和 overflow 容器之间也没有定位元素，则overflow无法对absolute元素进行剪裁

最后，非常有必要补充一点，那就是由于 position:fixed 固定定位元素的包含块是根元素，因此，除非是窗体滚动，否则上面讨论的所有overflow剪裁规则对固定定位都不适用。这一点后面还会提及。

2. 在CSS 世界中，上面说的这些几乎都是完美无瑕的，但是，随着 CSS3 新世界到来的冲击，规则在不经意间发生了一些变化，其中最明显的就是transform属性对overflow剪裁规则的影响，CSS3新世界中transform属性似乎扮演了原本“定位元素”的角色，但是这种角色扮演并不完全。

可以看到 overflow 元素自身 transform 的时候，Chrome 和 Opera 浏览器下的overflow剪裁是无效的，这是唯一和有定位属性时的overflow剪裁不一样的地方，因此才有“角色扮演并不完全”的说法。

transform除了改变overflow属性原有规则，对层叠上下文以及position:fixed的渲染都有影响。

因此，当大家遇到 absolute 元素被剪裁或者 fixed 固定定位失效时，可以看看是不是transform属性在作祟。