Android Собственный браузер не уважает z-index для прокрутки

Question

У меня есть скрипт для воспроизведения этой проблемы. Прокрутка работает только в собственном браузере Android, и элемент находится под абсолютным позиционированным элементом. По-видимому, он не уважает z-индекс для прокрутки.

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 элемента, вы не определение местоположения, но вы определяете позицию на вашем .overlay элемента с absolute. Это, плюс примените свойство 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/