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

transform对未设置定位属性普通元素的影响是个巨坑，自己亲身体验的总共有三点，简单理解相当于给当前元素设置了一个 positon:'relative' 但也不完全是（第2点）。

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

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

2. 改变子元素的定位属性，相当于fixed变成absolute，absolute变成relative

浅蓝色块本身应当一直离窗口30px，设置tranform则发现变成离红框的距离变成了30px，同时蓝色块的定位也发生了改变。

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

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

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

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