Keyframes z-index issue

[tmrd]

Hi,

I was playing with keyframes and an issue has occured. When I click the dropdown menu, it stays behind the next image.

How can I fix it and what’s causing this behaviour?

Edit fiddle - JSFiddle - Code Playground

[RyanReese]

Hello!

Basically, your .contain{} elements need z-index / position:relative; set. Also, you don’t need clearing elements. I cleaned up your c ode and fixed your issue. Are you only going to have 3 of these gallery/dropdown combos?

Edit fiddle - JSFiddle - Code Playground

[tmrd]

Hi!

No, there can be more than three images.

Edit : I solved it using jQuery.

    var contain = $('.contain');
    contain.click(function(){
        var topZ = 0;
        $('.contain').each(function(){
            var thisZ = parseInt($(this).css('z-index'), 10);
            if (thisZ > topZ){
                topZ = thisZ;
            }
        });
        $(this).css('z-index', topZ+1);
    });