css - Android浏览器的位置: fixed and z-index issue

Question

为了更好地说明，让我举个例子:

jsFiddle: http://jsfiddle.net/yhurak3e/

或者您可以在这里阅读:

#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;
}

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

在所有其他浏览器中，#box4(蓝色的)出现在其他元素的顶部，除非我为它的祖先之一提供 z-index 属性。这是预期的结果。

在 Android 的默认浏览器(在 4.1 上测试)中，#box4 位于#box1 和#box3 之下。

有人知道解决它的 CSS 解决方法吗？

谢谢!

Answer 1

来自 this 的类似问题的解决方法线程是应用

-webkit-transform:translateZ(0);

到#box4。