重叠式CSS无法正常工作

Question

i'm putting an overlay so that the elements on my page are disabled. On my page there are two elements. One is an anchor tag and another is a file upload input control. File upload control is invisible by default and is triggered on clicking the anchor tag. The problem is i have an overlay over these controls but its not working for the invisible file upload control. During overlay if i click on the file upload area its triggered.Here is jsfiddle Try clicking the PR text in jsfiddle, it shouldn't work due to overlay but is clickable

Here is the html code

<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 code

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

And here is the 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

Change css for .notEdit-overlay like this

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

should use z-index.

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

Answer 2

尝试添加pointer-events: none上载字段pointer-events: none包含pointer-events: none – http://jsfiddle.net/T5E8D/2/