Как получить (элемент с) самым высоким z-индексом CSS в документе?

Это не так просто, как найти элемент с самым высоким z-индексом. Порядок укладки также зависит от отношения дерева, поэтому, если элемент со статическим позиционированием с наибольшим z-индексом явно установлен, и если ваш код извлек его, это будет бесполезно, поскольку z-индекс бесполезен для элементов со статическим позиционированием.

Кроме того, правила порядка размещения в IE полностью нарушены, поэтому вам также придется учитывать это. И вам, возможно, придется учитывать элементы iframe/select в IE до 8/9, поскольку они имеют более высокий приоритет порядка наложения, чем любые другие узлы.

Вероятно, это будет полезно: http://www.w3.org/TR/CSS21/zindex.html

Вам нужно будет следовать всем этим и учитывать ошибки IE, чтобы иметь последовательный метод получения элемента с наибольшим приоритетом порядка стека.

Это модифицированная версия кода kennebec/Pravens, которая находит наивысший z-индекс в контексте стека. Эта версия также учитывает непрозрачность.

Если все, что вам нужно, это расположить элемент поверх всего остального на странице, просто вызовите highZ(document.body) или просто highZ(). Он находит самый высокий z-индекс корневого контекста стека, который будет делать именно это.

• Только нестационарно расположенные элементы имеют значение в контексте наложения.
• Непозиционированные элементы не начинают новый контекст стека. Таким образом, их потомки могут существовать в текущем контексте стека. Отсюда и рекурсия.
• Кроме того, если z-индекс имеет значение «авто», элемент не запускает новый контекст стека, поэтому вы должны выполнить рекурсию по его элементам.

• элементы со значением непрозрачности меньше 1 начинают новый контекст наложения. Если элемент с непрозрачностью меньше 1 не позиционирован, реализации должны рисовать создаваемый им слой в его родительском контексте наложения в том же порядке наложения, который использовался бы, если бы это был позиционированный элемент с «z-index: 0» и «Непрозрачность: 1». Если позиционируется элемент с непрозрачностью меньше 1, применяется свойство «z-index», как описано в [CSS21], за исключением того, что «авто» обрабатывается как «0», поскольку всегда создается новый контекст наложения.

  function highZ(parent, limit){
      limit = limit || Infinity;
      parent = parent || document.body;
      var who, temp, max= 1, opacity, i= 0;
      var children = parent.childNodes, length = children.length;
      while(i<length){
          who = children[i++];
          if (who.nodeType != 1) continue; // element nodes only
          opacity = deepCss(who,"opacity");
          if (deepCss(who,"position") !== "static") {
              temp = deepCss(who,"z-index");
              if (temp == "auto") { // positioned and z-index is auto, a new stacking context for opacity < 0. Further When zindex is auto ,it shall be treated as zindex = 0 within stacking context.
                  (opacity < 1)? temp=0:temp = highZ(who);
              } else {
                  temp = parseInt(temp, 10) || 0;
              }
          } else { // non-positioned element, a new stacking context for opacity < 1 and zindex shall be treated as if 0
              (opacity < 1)? temp=0:temp = highZ(who);
          }
          if (temp > max && temp <= limit) max = temp;                
      }
      return max;
  }
  
  function deepCss(who, css) {
      var sty, val, dv= document.defaultView || window;
      if (who.nodeType == 1) {
          sty = css.replace(/\-([a-z])/g, function(a, b){
              return b.toUpperCase();
          });
          val = who.style[sty];
          if (!val) {
              if(who.currentStyle) val= who.currentStyle[sty];
              else if (dv.getComputedStyle) {
                  val= dv.getComputedStyle(who,"").getPropertyValue(css);
              }
          }
      }
      return val || "";
  }
  

Вам нужно будет перебрать каждый отдельный элемент в DOM и отслеживать максимальный z-индекс, найденный во время цикла, вместе с элементом, который имеет этот z-индекс. Затем, когда вы закончите, у вас будет элемент, который вы ищете.

Это невероятно трудоемкий фрагмент скрипта, который может убить браузеры ваших пользователей. Зачем тебе это?

Вам нужны только одноуровневые элементы, чтобы найти самый высокий z-индекс, поэтому начните с родительского элемента или тела.

И часто у вас есть какой-то элемент с действительно высоким z-индексом, который вы хотите всегда быть на вершине - если это так, игнорируйте z-индексы более миллиона или что-то еще, что безопасно превышает количество братьев и сестер.

Вы можете сделать это в одной функции, но синтаксис для поиска значений таблиц стилей удобно иметь под рукой.

function highZ(pa, limit){
    limit= limit || Infinity;
    pa= pa || document.body;
    var who, tem, mx= 1, A= [], i= 0, L;
    pa= pa.childNodes, L= pa.length;
    while(i<L){
        who= pa[i++]
        if(who.nodeType== 1){
            tem= parseInt(deepCss(who,"z-index")) || 0;
            if(tem> mx && tem<=limit) mx= tem;
        }
    }
    return mx;
}
function deepCss(who, css){
    var sty, val, dv= document.defaultView || window;
    if(who.nodeType== 1){
        sty= css.replace(/\-([a-z])/g, function(a, b){
            return b.toUpperCase();
        });
        val= who.style[sty];
        if(!val){
            if(who.currentStyle) val= who.currentStyle[sty];
            else if(dv.getComputedStyle){
                val= dv.getComputedStyle(who,"").getPropertyValue(css);
            }
        }
    }
    return val || "";
}

оповещение (highZ())

Медер делает большое замечание! Я все равно попытался его закодировать, потому что мне скучно на работе и я не могу удержаться:

ПРИМЕЧАНИЕ. Будет работать только со стилем, заданным с использованием атрибута стиля (не будет захватывать стиль, заданный таблицами стилей).

function getHighIndex (selector) {
    if (!selector) { selector = "*" };

    var elements = document.querySelectorAll(selector) ||
                   oXmlDom.documentElement.selectNodes(selector),
        i = 0,
        e, s,
        max = elements.length,
        found = [];

    for (; i < max; i += 1) {
        e = elements[i].style.zIndex;
        s = elements[i].style.position;
        if (e && s !== "static") {
          found.push(parseInt(e, 10));
        }
    }

    return found.length ? Math.max.apply(null, found) : 0;
}