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 解决方法吗？

谢谢！

Answer 1

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

-webkit-transform:translateZ(0);

到

#box4

.

Answer 2

您必须在 parent 元素或

#box4

的元素上应用上述解决方法，同时将

-webkit-transform:translateZ(0);

应用于

#box4

，如下所示：

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

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

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