Z-index doesn't work. Popup is hidden under a layer

Question

I am helping to maintain this website http://www.groupme.my/national/

For certain deals with a long list of options, when you click on the "Buy now" button, the options list popup will be partially covered by the deal below. For example, click on the "Buy now" button for this deal "[55% off] Korean Style Handbag...".

Please note that not every deal comes with options. If there is no options, clicking on "Buyw now" will bring you to the shopping cart directly.

I have tried to put in z-index, but it doesn't seem to do anything.

Please help to check how we can resolve this problem. Thanks.

Solution 1

If I understand your concern correctly, the element that fades in has a bottom edge that is behind the item that is beneath, right?

If this is the problem then z-index isn't going to help you because the thing that is fading in is being attached to a div (and it IS going above it) but it is going to be behind the div that sits on the page *after the one that the fading one is being attached to, so, the fading div is going to be behind the next one, no matter what.

The easiest way to deal with this is to draw them in opposite order, so that the divs are moving towards the zTOP as they go up, or to put it another way, set their z-order in reverse order to how they're drawn, so if you have 10 items, the first one will have a zIndex of 10 and the next one 9 and so on.

Solution 2

The z-index: 0 in content-wrapper-top seems the problem ; try to remove it.

EDIT added after comment : I found this z-index in the generate CSS (line:713):

.content-pane-index {
    float: left;
    width: 737px;
    position: relative;
    z-index: 0;<------------------------ HERE
} 

Solution 3

Dr.Dredel explained the problem well, but if you don't want to do any reorder HTML, I have a workaround, maybe will be little stupid, but I think it should work anyway, I'll give you idea, I don't have any code to test any code :)

First, your z-index must not have that huge numbers, like 1000 then 50000! use smaller units like 5 10 15 and so, my code will work if you did that first, I used the largest number that must be on the page.

I'll use jQuery, for Buy Now button, add this code after show pop code:

$(this).parent().parent().parent().parent().parent().parent().css("z-index","999");

This code means find parent if buynow a tag and parent of the parent of a tag and so to div that have content-pane-index class name and add z-index for max.

you maybe can use this code instead too:

$(this).parents(".content-pane-index").css("z-index","999");

for close button you need to restore z-index that you added before, so add this code too after closing pop code:

$(this).parent().parent().parent().parent().parent().parent().parent().css("z-index","0");

or

$(this).parents(".content-pane-index").css("z-index","0");

I hope you got an idea at least :)

My code maybe need fixes like add or remove one .parent() method, or change selector that used with .parents().

I Love workarounds :P