Как вычислить эффективный z-индекс элемента HTML

Я хотел бы определить z-индекс элемента на html-странице из кода. Я использую jQuery.

jQuery позволит мне проверить применяемый z-индекс, используя $(element).css( "z-index" ). Если z-index не установлен непосредственно на этом элементе, Firefox возвращает "auto", а IE возвращает "0" . Эффективный z-индекс этого node тогда зависит от z-индекса его контейнера.

Я решил, что могу вычислить эффективный z-индекс, посмотрев на node и его родителей до тех пор, пока не будет найдено значение z-index. Проблема заключается, по крайней мере, в IE, я не могу устранить элемент с z-индексом 0 из элемента, который наследует z-индекс своего родителя, как в обоих случаях .css( "z-index" ) возвращает 0 Любые мысли о том, как вычислить фактический z-индекс элемента?

Если вы хотите поэкспериментировать, вы можете использовать этот код. В IE он будет выводить "0" , "0" , "0" , "300". В Firefox он будет выводить "авто", "авто", "0" , "300".

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<script type="text/javascript">
    alert($("<div></div>").css("z-index"));
    alert($("<div style='position:relative'></div>").css("z-index"));
    alert($("<div style='z-index:0'></div>").css("z-index"));
    alert($("<div style='z-index:100'></div>").css("z-index"));
</script>

</body>
</html>

Ответ 1

в IE, я не могу устранить элемент с z-индексом 0 из элемента, который наследует z-индекс своего родительского

Вы ищете элементы, имеющие эффективный индекс z. z-index эффективен только для элементов с типом position, отличным от static. Поэтому вы должны искать родителей, пока не найдете позиционированный элемент с z-index не auto.

(Это даст вам самый внутренний z-индекс. Контексты стеков могут быть вложенными, поэтому вместо этого вы можете посмотреть на внешний z-индекс, посмотрев на самого дальнего предка, который будет расположен.)

В IE6-7 элемент без z-index неправильно получает автоматический z-index 0. Таким образом, это действительно даст вам показание 0, когда вы посмотрите на позиционированный элемент без z-index в IE6-7... это может быть неправильно, но это отражает IE-неверный перевод, который вам придется избегать или работать в любом случае.

(В IE8 это окончательно исправлено, и вы действительно получите auto для первого предупреждения, предполагая подходящий параметр doctype/EmulateIE для отправки его в собственный режим IE8.)

Ответ 2

Я вижу проблему, но я не уверен, что это действительно важно... потому что нуль является корневым z-индексом страницы 0. В следующем коде:

alert($("<div id='root' style='z-index:10'><div id='blah'></div><div>").get(0).style.zIndex);
alert($("<div id='root' style='z-index:10'><div id='blah'></div><div>").children('#blah').get(0).style.zIndex);

FF сообщает 10 и (не "авто" ). IE сообщает 10 и 0. Для IE, если вы видите 0, затем перейдите на уровень. Для FF, если вы видите пробел, перейдите на уровень. И тогда в любом случае, если вы дойдете до корня, а значение будет "auto" (в состоянии FF), тогда я (предположим) вы могли бы предположить, что это 0. (Может быть, это не большое предположение!)

Ответ 3

Я думаю, что эта функция в большинстве случаев решит вашу проблему.

function ustMaxZIndex(eleman) {
  var elm = $('#'+eleman);
  var zindex = parseInt(elm.css("z-index")) > 0 ? elm.css("z-index") : 0;
  while(true) {
    zindex = (parseInt(elm.css("z-index")) > 0 && parseInt(elm.css("z-index")) > zindex) ? elm.css("z-index") : zindex;
    if(elm.length > 0) {
      elm = elm.parent();
    } else {
      break;
    }
  }
  return zindex;
}

Ответ 4

Оптимизированная версия ответа MC_delta_T:

Это не будет работать с вложенными z-индексами, но оно найдет наивысшее значение в иерархии, которое должно работать больше всего времени:

function getEffectiveZIndex(elm) {
    var elementZIndex,
        style,
        zindex = 0;

    while(elm) {
        style = getComputedStyle(elm);

        if (style) {
            elementZIndex = parseInt(style.getPropertyValue('z-index'), 10);

            if (elementZIndex > zindex) {
                zindex = elementZIndex;
            }
        }

        elm = elm.parentNode;
    }

    return zindex;
}