Android浏览器的定位：固定和z-index问题答案

【问题标题】：Android browser's position: fixed and z-index issueAndroid浏览器的定位：固定和z-index问题
【发布时间】：2014-12-12 02:09:56
【问题描述】：

让我分享一个更好的例子：

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

谢谢！

【问题讨论】：

你解决过这个问题吗？遇到backface-visibility 技巧无法解决的类似问题。

标签： css css-position z-index android-browser

【解决方案1】：

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

-webkit-transform:translateZ(0);

到#box4。

【讨论】：

我已经试过了。不工作。 -webkit-backface-visibility 解决方法都不是。

【解决方案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/

【讨论】：