Наложение css не работает

Question

Я помещаю наложение так, чтобы элементы на моей странице были отключены. На моей странице есть два элемента. Один - это тег anchor, а другой - управление вводом file upload. Контроль загрузки файлов по умолчанию невидим и запускается при нажатии на тег привязки. Проблема в том, что у меня есть надпись над этими элементами управления, но она не работает для контроля невидимого управления загрузкой файлов. Во время наложения, если я нажимаю на область загрузки файла его triggered.Here является jsfiddle Попробуйте щелкнуть текст PR в jsfiddle, он не должен работать из-за наложения, но кликабельна

Вот HTML код

<div class="ast"> 
<div class="notEdit-overlay"></div> 
<a id="uploadQrCode" href="#" style="cursor:pointer;">Upload QR Code</a> 
P<input id="qrCodeFileUpload" type="file" class="hideQRUpload" />R 
</div> 

Jquery код

$('#uploadQrCode').click(function(){ 
    $('#qrCodeFileUpload').click(); 
}); 

А вот CSS

.hideQRUpload 
{ 
    position:absolute; 
    opacity:0; 
    width:0px; 
    height:0px; 
} 
.notEdit-overlay 
{ 
    width: 1080px; 
    height: 99%; 
    left: 0px; 
    background: red; 
    position: absolute; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 
.ast{ 
    position: relative; 
} 

Answer 1

Попробуйте добавить pointer-events: none для поля загрузки - http://jsfiddle.net/T5E8D/2/

Answer 2

Изменение CSS для .notEdit-наложению как этот

.notEdit-overlay 
{ 
width: 1080px; 
height: 99%; 
left: 0px; 
background: none; 
position: absolute; 
opacity: 0; 
filter: alpha(opacity=0); 
z-index: 1; 
} 

следует использовать Z-индекс.

http://jsfiddle.net/T5E8D/3/