How to display the latest called object on top?

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 开发者_如何学JAVAis 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.

---

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.

---

Two ways:

Set a z-index

Setting a z-index will change the default stacking order. You can have a counter that increments and use that to set the z-index of newly stacked items. You may have issues with IE 7 or earlier, though, and those can be fixed by setting the z-index of other items. https://developer.mozilla.org/en/Understanding_CSS_z-index/Adding_z-index

Use absolute positioning, and append the div to the body

If you use absolute positioning, you can append the div to the body and still have it appear below the element. If you append the div to the body, the one last added should be on top, because of the default stacking order.

---

Give it a class when it is opened, and remove that class from the previously opened ones:

$(".slidedown_active").removeClass("slidedown_active");
$(this).addClass(".slidedown_active");

Then your users can use z-index in their style definition for that class to ensure the active list is always visible.

The reason I don't recommend setting the z-index directly is because you can mess up your users' layout unnecessarily. These kind of overlap issues can be a real headache for a web developer. For a plugin to try to guess at how to resolve overlap issues, without any knowledge of the code or design, would be virtually impossible. Instead, give your users the tools they need to fix the overlap issues themselves. It may be that your users would never encounter overlap issues, so setting the z-index for them would be pointless at best, and potentially harmful.