Android浏览器的位置是：固定和z-index的问题

Question

让我分享更好地说明一个例子：

的jsfiddle：http://jsfiddle.net/yhurak3e/

或者，你可以在这里阅读：

HTML：

<div id="box1">box1</div> 
    <div id="box2">box2 
     <div> 
      <div id="box4">box4</div> 
     </div> 
    </div> 
<div id="box3">box3</div> 

CSS：

#box1 { 
    width: 100%; 
    height: 40px; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background: green; 
    z-index: 5; 
} 
#box2 { 
    height: 300px; 
    position: relative; 
    background: yellow; 
} 
#box3 { 
    height: 100%; 
    width: 100%; 
    left: 0; 
    top: 0; 
    position: fixed; 
    background: black; 
    opacity: .8; 
    z-index: 10; 
} 
#box4 { 
    left: 20px; 
    top: 20px; 
    right: 20px; 
    bottom: 20px; 
    position: fixed; 
    background: blue; 
    z-index: 11; 
} 

在其他所有浏览器中，＃box4（蓝色）出现在其他元素的顶部，除非我将z-index属性赋予其中一个调节符。这是预期的结果。

在Android的默认浏览器（在4.1测试）＃box4位于＃box1和＃box3下。

有没有人知道一个CSS解决方法来解决它？

Thx！

Answer 1

一种从this螺纹类似的问题的解决方法是申请

-webkit-transform:translateZ(0); 

到#box4。

Answer 2

你必须运用上面的变通方法父元素或#box4的元素上，将这项-webkit-transform:translateZ(0);到#box4这样一起：

#box1, #box2{ /*parent*/ 
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ 
backface-visibility: hidden; 
} 
#box4{ /*child*/ 
-webkit-transform:translateZ(0); /* Chrome, Safari, Opera */ 
transform:translateZ(0); 
} 

工作演示：http://jsfiddle.net/iorgu/yhurak3e/14/