Z-index does not work as expected?

Question

I am working on this site http://www.group---me.my/national/

Please remove --- in the url.

For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.

To do this, on my local test site, I added the following div class:

    .overlay{
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 333%;
        background-color: black;
        z-index: 20;
        opacity: 0.8;
        filter: alpha(opacity=80);
    }

Then on the Buy Now button, I added

    onclick="javascript:document.getElementById('fade').style.display='block';"

I also have this in the site

    <div id="fade" class="overlay"></div>

But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.

Any help is much appreciated. Thanks.

Answer 1

Which browser? Which version. I am getting it right here. It should hide right?

And it is prominent. What is that you wanna do here?

Answer 2

如果您没有指定要相对放置的父元素，则您的overlay div将相对于body定位，因此它可以位于所有其他内容之上。