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的問題

回答

相關問題