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

Я помещаю наложение так, чтобы элементы на моей странице были отключены. На моей странице есть два элемента. Один из них - anchor тег, а другой - элемент управления вводом file upload. Управление загрузкой файлов по умолчанию невидимо и запускается при нажатии на тег привязки. Проблема в том, что у меня есть надпись над этими элементами управления, но она не работает для контроля невидимой загрузки файлов. Во время оверлея, если я нажимаю на область загрузки файла, его запускает. Вот 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;
}