1

我有许多嵌套的、绝对定位的元素的复杂结构。

这些元素可能有也可能没有他们的 z-index 集。

它们也可能有也可能没有相同的父元素。

我想知道返回哪个元素位于“顶部”的最佳/最简单方法是什么。类似于以下内容...

$(".panel").topMost()

在此先感谢您的帮助

4

5 回答 5

3

你的意思是z-index最高的元素：

$(document).ready(function() {
    var array = [];
    $("*").each(function() {
        array.push($(this).css("z-index"));
    });
    var highest = Math.max.apply(Math, array);
    console.log(highest);
});
于 2013-02-19T04:51:29.663 回答
0

尝试这个：

var z = [];
$('.panel').each(function(i, el) {
  var $panel = $(el),
      zindex = $panel.css('z-index');
  z[zindex] = $panel;
});

var topMost = z.slice(-1);
于 2013-02-19T04:57:27.930 回答
0

有一个插件..topZindex

$.topZIndex("div");
于 2013-02-19T04:59:08.123 回答
0

在显示 jQuery UI 日期选择器并使用事件参数来找出单击的图标时，我在模态对话框中遇到了类似的问题。模态对话框覆盖阻止新的日期选择器显示在模态对话框的顶部。

在三种浏览器（IE、Firefox 和 Chrome）中运行的最佳解决方案是：

     function topZIndex(target, selector) {
          var objs = $(target).parents(selector + '[z-index > 0]');
          var a1 = -1;
          $.each(objs, function (index, z1) {a1=(z1.style.zIndex > a1)? z1.style.zIndex : a1; });
          return a1;
      };

使用事件参数如下：

    var zIndex = topZIndex(event.currentTarget, 'div')+1;

或者

    var zIndex = topZIndex(event.currentTarget, '*')+1;

两种组合都将产生相同的结果，但是通过指定 'div' 而不是 '*' 来指定更有效

然后假设我的日期选择器 id 是 datepickerpanel 为 datepicker 设置新的 zIndex

    $('#datepickerpanel').css('z-index', zIndex);

此解决方案提供了适当的 z-index 值以将新对象放置在模态对话框的顶部。

于 2013-03-03T19:33:26.970 回答
0

看看你是否没有指定z-index绝对元素 then last of the element will be on top of other elems，意味着last element will have a greater highest default z-index calculated by browser它本身。

试试这个小提琴：http: //jsfiddle.net/fLB2W/

var array = [];
$("*").each(function () {
   if ($(this).css('position') == 'absolute') {
       array.push($(this).css("position")+'<--pos & class -->'+$(this).attr('class'));
    }
});

 console.log(array[array.length-1]);
于 2013-02-19T05:30:20.533 回答