Question

我已经设置了一个小提琴来重现这个问题。仅在Android本机浏览器中，滚动适用于绝对定位元素下的元素。它似乎不尊重滚动的z-index。

html, body {
    height: 100%;
    overflow: hidden;
}
#scroll {
    height: 100%;
    overflow: scroll;
}
.overlay {
   height: 100%;
   width: 100%;
   background-color: #333;
   opacity: .4;
   position: absolute;
   z-index: 4;
   left: 0;
   top: 0;    
 }

代码：http://jsfiddle.net/s4vPV/5/

结果：http://fiddle.jshell.net/s4vPV/5/show/

Answer 1

将#scroll div设为position:relative，并设置z-index:3或更少的内容，以便浏览器尊重最重要的内容。

Answer 2

我对您的CSS做了一些小改动，这解决了您遇到的问题：

在#scroll元素上，您没有定义定位，而是使用absolute定义.overlay元素上的位置。对z-index元素应用值为4的.overlay属性，会导致叠加层叠放在#scroll元素之上。由于叠加层的高度和宽度为100％，因此#scroll元素无法访问，因为.overlay元素完全覆盖了它。

#scroll {
   height: 100%;
   overflow: scroll;
}

.overlay {
   height: 100%;
   width: 100%;
   background-color: #333;
   opacity: .4;
   position: absolute;
   z-index: 4;
   left: 0;
   top: 0;
}

基本上，如果浏览器是完全堆叠在一起的纸张，您将无法读取堆栈底部的“访问”。

如果您正在尝试设置滚动条的样式，我建议您直接查看它们的样式。如果没有，您所要做的就是在#scroll和z-index: 5;上放置一个位置：相对位置来解决此问题。

以下是解决方案的jsfiddle：http://jsfiddle.net/dmidify/s4vPV/10/

Android Native浏览器不支持z-index滚动

2 个答案: