Question

Well i have a transparent div or the background is set to transparent 🙂
css:

#lowerLayer
{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-color: Transparent;
    cursor: help;
    z-index: 1;
}

The div is placed right under the tag.. and under there i have a blueprint layout.

jquery(this is run in $(document).ready):

$("#lowerLayer").click(function() {
    $(this).fadeTo("fast", 0, function() {
        $(this).hide(0);
    });
});

My layout works perfect in Opera 10 and i guess it works in Opera 9 to… but IE 7 bugs layers that have lower z-index are acting as they are above the transparent div…

Answer 1

A simple solution would be to place the transparent div (#lowerLayer) last in the html (just before the closing </body>.

It’s a known issue with some browsers (IE for example)

EDIT: as mentioned in my comment, the blockUI plugin handles everything you may ever need if you want to mask your page with an overlay.