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

让我分享更好地说明一个例子：Android浏览器的位置是：固定和z-index的问题

的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！

来源

2014-10-16 Burnee

难道你曾经修复过这个？有类似的问题，'backface-visibility'技巧无法解决。 – AlexKempton 2015-02-15 16:45:18

不，不幸的是。 – Burnee 2015-11-04 15:26:14

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

-webkit-transform:translateZ(0);

到#box4。

来源

2014-10-16 16:59:43 yscik

我已经试过了。不起作用。 '-webkit-backface-visibility'解决方法都没有。 – Burnee 2014-10-17 13:16:43

这在Android 4.3上适用于我 – 2016-01-16 15:42:59

你必须运用上面的变通方法父元素或#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/

来源

2015-03-07 16:32:56 iorgu

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

回答

相关问题