javascript - 如何将最新调用的对象显示在最上面？

Question

我正在创建一个自定义选择插件。一切都很顺利，但是下拉菜单(<ul>-对象)彼此重叠:(

据我所知，重叠顺序是在页面上的元素顺序之后或创建元素时设置的。所以我的问题是:使最新打开/显示的对象( <ul> )位于层次结构顶部的方法是什么？

我只需要正确的方法。我不会复制完整的代码，而是复制一个小例子:

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

(一张图片胜过1000字)

所以可以说，我打开绿色选择最后一个..我怎样才能将其放在黄色之上？

编辑

为了更容易测试，我创建了 jsfiddle。为了将来的引用，我将发布链接: http://jsfiddle.net/hobobne/uZV5p/1/ 这是当前问题的现场演示。

Answer 1

您正在寻找的是 CSS z-index property (较高的值将元素放在前面)。

您可能只需按升序设置它们(例如，将绿色一设置为 1000，将黄色设置为 1001)，但如果您确实需要在单击时将其置于前面，则可以使用 javascript 更改 z-index

var zindex=100;

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

这是一个演示:http://jsfiddle.net/waitinforatrain/Vf7Hu/ (单击红色和蓝色 div 将其置于前面)。

编辑:gilly3 的方法更好，正如前面提到的，旧版本的 IE 可能存在一些问题。