我正在创建一个自定义选择插件。一切都很好,但是下拉列表(<ul>
-objects)彼此重叠:(
我知道,重叠顺序是在页面上的元素顺序之后或创建它们时设置的。所以我的问题是:什么是使最新打开/显示的对象(<ul>
)在层次结构之上的方法?
我只需要正确的方法。我不会复制完整的代码,而是一个小例子:
$('#trigger').click(function () {
new_dropdown.slideDown();
});
(一张图片价值1000字)
因此,可以说我打开了绿色,然后选择了最后一个。如何使它在黄色的上面?
编辑
为了简化测试,我创建了jsfiddle。为了将来的参考,我将发布链接:http://jsfiddle.net/hobobne/uZV5p/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可能存在一些问题。