CSS3 transform对普通元素z-index、positon和overflow的影响,

[wqhui]

对普通元素设置transform属性，会将普通元素提升为一个新的层叠上下文：

1. 提升该元素的垂直地位，可以理解成z-index变大

绿色块的元素顺序在红框后面，红框设有margin-left:-20px ，正常应该是绿块盖住红框，设置tranform则红框会盖住绿块。

2. 改变子元素的定位基准，fixed定位会相对于设置transform的祖先元素定位，如果absolute基于transform的祖先元素定位，那么会忽略上外边距。

浅蓝色块(fixed定位)本身应当一直离窗口30px，设置tranform则发现变成离红框的距离变成了30px，同时蓝色块（absolute定位）也下移了30px。

3. 使绝对定位(absolute)的子元素受父元素overflow:hidden的作用。（ps:绝对定位(absolute)的子元素宽度大于父元素，如果父容器的定位是static，也就是默认时，overflow:hidden无效）

蓝色块一开始不受父元素的overflow作用，设置tranform则发现受父元素overflow影响。

预览链接：
其他前端有趣的例子和坑合集：https://github.com/wqhui/blog

设置完transform属性后，浅蓝色块相当于红框去定位；蓝色块也相当于红框去定位；红框直接盖过了绿色块。