Question

I’m creating a custom select plugin. Everything is going great, but the dropdowns (<ul>-objects) are overlapping on each other 🙁

I understand, that the overlapping order is set after the elements order on page or when they are created. So my question is: What is the method to make the latest opened/shown object (<ul>) on top of the hierarchy?

I just need the correct method. I’m not going to copy the full code, but a little example:

$('#trigger').click(function () {
    new_dropdown.slideDown();
});

(A picture is worth of 1000 words)

So lets say, that I open the green select the last.. How can I make it on top of the yellow one?

EDIT

For easier testing I created jsfiddle. For future references I’ll post the link: http://jsfiddle.net/hobobne/uZV5p/1/ This is the live demo of the problem at hand.

Answer 1

What you’re looking for is the CSS z-index property (higher values put elements at the front).

You could probably just set them in ascending order (e.g. set green one to 1000, yellow to 1001), but if you really need to bring it to the front when clicked, you can change the z-index with javascript

var zindex=100;

$("#trigger").click( function() {
    newdropdown.css('z-index', ++zindex);
});

Here’s a demo: http://jsfiddle.net/waitinforatrain/Vf7Hu/ (click the red and blue divs to bring to front).

Edit: gilly3’s approach is better, and as was mentioned there may be some issues with older versions of IE.