transform:translate() 会影响position 层级定位

phpvar

1. <div style="width:500px;margin: auto;position: relative;border:1px blue solid;">
   
2.             <div>
   
3.             <div style="width:200px;height:200px; background: #f00;position: relative;left: 0;top: 0;<b>-webkit-transform:translate(0,0)</b>"><span style="width:100px;height:100px;background: #000; position: absolute;z-index: 1;color:#fff;">应该盖住绿色层！！</span></div>
   
4.             </div>
   
5.             <div style="width:200px;height:200px; background: #080;position: absolute;left: 50px;top: 0;">绿色层</div>
   
6.     </div>

复制代码

如上代码：黑色层的 z-index 比绿色层高，除IE7及以下版本，其它浏览器黑色层应该盖住绿色层，换句话说黑色层应该在绿色层之上，而不是被绿色层盖住！！

注意看黑色加粗部分，就是transform:translate() 会影响position 层级定位！！不信试试去掉这个属性定义看看.....