Как рассчитать эффективный z-индекс элемента HTML - PullRequest
Новая
       10

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

12 голосов
/ 08 января 2010

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

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

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

Если вы хотите поэкспериментировать, вы можете использовать этот код. На IE он выведет «0», «0», «0», «300». В Firefox он выведет «auto», «auto», «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>

Ответы [ 5 ]

8 голосов
/ 08 января 2010

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

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

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

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

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

1 голос
/ 15 сентября 2014

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

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;
}
1 голос
/ 08 января 2010

Я вижу проблему, но я не уверен, что это действительно имеет значение ... потому что ноль - это корневой 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 и (не 'auto'). IE сообщает о 10 и 0. Для IE, если вы видите 0, двигайтесь вверх на уровень. Для FF, если вы видите пробел, то поднимитесь на уровень выше. И затем в любом случае, если вы доберетесь до корня, и значение будет «auto» (в условиях FF), тогда я (думаю) вы могли бы предположить, что оно равно 0. (Может быть, это не очень хорошее предположение!)

0 голосов
/ 25 февраля 2019

Вот моя попытка. Функция возвращает либо auto, если никакие конкретные номера z-index не могут быть найдены, либо номер. Он включает передаваемый элемент (через вызов метода addBack).

Надеюсь, это кому-нибудь пригодится: 


/**
 * __getElementZIndex
 * 
 * @access  private
 * @param   HTMLElement element
 * @return  String
 */
var __getElementZIndex = function(element) {
    var response = 'auto',
        zIndex,
        items = $(element).parents().addBack().toArray(),
        index,
        item;
    for (index in items) {
        item = items[index];
        zIndex = $(item).css('z-index');
        if (zIndex === 'auto') {
            continue;
        }
        if (zIndex === 'initial') {
            continue;
        }
        if (zIndex === 'inherit') {
            continue;
        }
        if (isNaN(zIndex) === true) {
            continue;
        }
        zIndex = parseInt(zIndex, 10);
        if (response === 'auto') {
            response = zIndex;
            continue;
        }
        if (zIndex > response) {
            response = zIndex;
            continue;
        }
    }
    return response;
};

Примечание: требуется использование jQuery

0 голосов
/ 09 декабря 2014

Оптимизированная версия ответа 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...