如何在顶部显示最新的被调用对象？

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可能存在一些问题。

Answer 2

两种方式：

设置z-index

设置z-index将更改默认堆叠顺序。您可以使用一个递增的计数器，并使用它来设置新堆叠项目的z-index。但是，您可能会遇到IE 7或更早版本的问题，可以通过设置其他项目的z-index来修复这些问题。 https://developer.mozilla.org/en/Understanding_CSS_z-index/Adding_z-index

使用绝对定位，并将div附加到正文

如果使用绝对定位，则可以将div附加到主体，并使其仍显示在元素下方。如果将div附加到正文，则最后添加的div应位于顶部，因为默认的堆叠顺序。

Answer 3

在打开它时给它一个类，并从之前打开的类中删除该类：

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

然后，您的用户可以在其类的样式定义中使用z-index，以确保活动列表始终可见。

我不建议直接设置z-index的原因是因为您可能会不必要地搞乱用户的布局。对于Web开发人员来说，这种重叠问题可能是一个令人头痛的问题。对于试图猜测如何解决重叠问题的插件，在不了解代码或设计的情况下，实际上是不可能的。相反，请为您的用户提供解决重叠问题所需的工具。可能是您的用户永远不会遇到重叠问题，因此为他们设置z-index充其量只是毫无意义，并且可能有害。