Question

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

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

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

我想知道什么是最好/最简单的方法来返回哪个元素在'顶部'。像下面这样......

$（ “面板”）。最顶级（）

先谢谢你的帮助

Answer 1

你的意思是具有最高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);
});

Answer 2

试试这个：

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

var topMost = z.slice(-1);

Answer 3

插件就在那里.. topZindex

$.topZIndex("div");

Answer 4

查看您是否未将z-index指定为绝对元素，然后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]);

Answer 5

我在使用Modal对话框时遇到类似的问题，同时显示jQuery UI datepicker并使用事件参数来确定点击的图标。模态对话框覆盖阻止新的日期选择器显示在模式对话框的顶部。

在三种浏览器（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值，以将新对象置于模态对话框之上。

如何确定顶级元素？

5 个答案:

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