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/

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

2 个答案: