Как вы можете определить самый высокий z-индекс в вашем документе? - PullRequest
Новая
       32

Как вы можете определить самый высокий z-индекс в вашем документе?

62 голосов
/ 13 июля 2009

Чтобы установить div, содержащий прозрачное текстовое изображение, как самый высокий z-индекс в моем документе, я выбрал число 10000, и это решило мою проблему.

Раньше я угадывал с номером 3, но это не имело никакого эффекта.

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

Я пытался найти этот показатель в Firebug, но не смог его найти.

Ответы [ 13 ]

39 голосов
/ 13 июля 2009

Кража некоторого кода с сайта abcoder для ясности: 

  var maxZ = Math.max.apply(null, 
    $.map($('body *'), function(e,n) {
      if ($(e).css('position') != 'static')
        return parseInt($(e).css('z-index')) || 1;
  }));
34 голосов
/ 13 июля 2009

Вы можете вызвать findHighestZIndex для определенного типа элемента, такого как 'DIV', например: 

findHighestZIndex('div');

при условии, что функция findHighestZindex определена следующим образом: 

function findHighestZIndex(elem)
{
  var elems = document.getElementsByTagName(elem);
  var highest = 0;
  for (var i = 0; i < elems.length; i++)
  {
    var zindex=document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("z-index");
    if ((zindex > highest) && (zindex != 'auto'))
    {
      highest = zindex;
    }
  }
  return highest;
}
12 голосов
/ 03 октября 2017

Использование ES6 - более чистый подход 

function maxZIndex() {

     return Array.from(document.querySelectorAll('body *'))
           .map(a => parseFloat(window.getComputedStyle(a).zIndex))
           .filter(a => !isNaN(a))
           .sort()
           .pop();
}
4 голосов
/ 13 июля 2009

Полагаю, вы должны сделать это сами ... 

function findHighestZIndex()
{
    var divs = document.getElementsByTagName('div');
    var highest = 0;
    for (var i = 0; i < divs .length; i++)
    {
        var zindex = divs[i].style.zIndex;
        if (zindex > highest) {
            highest = zindex;
        }
    }
    return highest;
}
4 голосов
/ 13 июля 2009

Я верю, что вы наблюдаете за Вуду. Без доступа к вашей полной таблице стилей я, конечно, не могу сказать достоверно; но мне кажется вероятным, что на самом деле здесь произошло то, что вы забыли, что z-index.

влияет только на позиционированные элементы.

Кроме того, z-index не назначаются автоматически, только в таблицах стилей, что означает, что без других элементов z-index ed, z-index:1; будет поверх всего остального.

4 голосов
/ 13 июля 2009

Лучший способ решить эту проблему, на мой взгляд, просто установить себе соглашения о том, какие типы z-index используются для различных типов элементов. Затем вы найдете правильный z-index для использования, оглянувшись на свою документацию.

4 голосов
/ 13 июля 2009

Нет свойства по умолчанию или чего-то еще, но вы могли бы написать некоторый javascript, чтобы перебрать все элементы и выяснить это. Или, если вы используете библиотеку управления DOM, такую ​​как jQuery, вы можете расширить ее методы (или выяснить, поддерживает ли она это уже), чтобы она начинала отслеживать z-индексы элементов по загрузке страницы, а затем она становится тривиальной для получения самых высоких z-индексов. индекс.

3 голосов
/ 12 августа 2015

Я хотел бы добавить свою реализацию ECMAScript 6, которую я использую в одном из моих пользовательских скриптов. Я использую этот, чтобы определить z-index определенных элементов, чтобы они всегда выглядели самыми высокими. Я могу исключить эти элементы с помощью селектора :not. 

let highestZIndex = 0;

// later, potentially repeatedly
highestZIndex = Math.max(
  highestZIndex,
  ...Array.from(document.querySelectorAll("body *:not([data-highest]):not(.yetHigher)"), (elem) => parseFloat(getComputedStyle(elem).zIndex))
    .filter((zIndex) => !isNaN(zIndex))
);

Нижние пять строк могут запускаться несколько раз и многократно обновлять переменную highestZIndex, определяя максимум между значением current highestZIndex и всеми другими вычисленными z-индексами всех элементов. filter исключает все значения "auto".

1 голос
/ 22 июня 2017

Недавно мне пришлось сделать это для проекта, и я обнаружил, что извлек много пользы из @ Philippe Gerber отличного ответа здесь и @ flo отличного ответа (принятый ответ).

Ключевые отличия от ответов, упомянутых выше:

  • Как CSS z-index, так и любой встроенный стиль z-index рассчитываются и используют большее из двух значений для сравнения и вычисления.
  • Значения преобразуются в целые числа, а любые строковые значения (auto, static и т. Д.) Игнорируются.

Здесь - это CodePen для примера кода, но он также включен и здесь. 

(() => {
  /**
   * Determines is the value is numeric or not.
   * See: https://stackoverflow.com/a/9716488/1058612.
   * @param {*} val The value to test for numeric type.
   * @return {boolean} Whether the value is numeric or not.
   */
  function isNumeric(val) {
    return !isNaN(parseFloat(val)) && isFinite(val);
  }

  
  /**
   * Finds the highest index in the current document.
   * Derived from the following great examples:
   *  [1] https://stackoverflow.com/a/1118216/1058612
   *  [2] https://stackoverflow.com/a/1118217/1058612
   * @return {number} An integer representing the value of the highest z-index.
   */
  function findHighestZIndex() {
    let queryObject = document.querySelectorAll('*');
    let childNodes = Object.keys(queryObject).map(key => queryObject[key]);
    let highest = 0;
    
    childNodes.forEach((node) => {
      // Get the calculated CSS z-index value.
      let cssStyles = document.defaultView.getComputedStyle(node);
      let cssZIndex = cssStyles.getPropertyValue('z-index');
      
      // Get any inline z-index value.
      let inlineZIndex = node.style.zIndex;

      // Coerce the values as integers for comparison.
      cssZIndex = isNumeric(cssZIndex) ? parseInt(cssZIndex, 10) : 0;
      inlineZIndex = isNumeric(inlineZIndex) ? parseInt(inlineZIndex, 10) : 0;
      
      // Take the highest z-index for this element, whether inline or from CSS.
      let currentZIndex = cssZIndex > inlineZIndex ? cssZIndex : inlineZIndex;
      
      if ((currentZIndex > highest)) {
        highest = currentZIndex;
      }
    });

    return highest;
  }

  console.log('Highest Z', findHighestZIndex());
})();
#root {
  background-color: #333;
}

.first-child {
  background-color: #fff;
  display: inline-block;
  height: 100px;
  width: 100px;
}

.second-child {
  background-color: #00ff00;
  display: block;
  height: 90%;
  width: 90%;
  padding: 0;
  margin: 5%;
}

.third-child {
  background-color: #0000ff;
  display: block;
  height: 90%;
  width: 90%;
  padding: 0;
  margin: 5%;
}

.nested-high-z-index {
  position: absolute;
  z-index: 9999;
}
<div id="root" style="z-index: 10">
  <div class="first-child" style="z-index: 11">
    <div class="second-child" style="z-index: 12"></div>
  </div>
  <div class="first-child" style="z-index: 13">
    <div class="second-child" style="z-index: 14"></div>
  </div>
  <div class="first-child" style="z-index: 15">
    <div class="second-child" style="z-index: 16"></div>
  </div>
  <div class="first-child" style="z-index: 17">
    <div class="second-child" style="z-index: 18">
      <div class="third-child" style="z-index: 19">
        <div class="nested-high-z-index">Hello!!! </div>
      </div>
    </div>
  </div>
  <div class="first-child">
    <div class="second-child"></div>
  </div>
  <div class="first-child">
    <div class="second-child"></div>
  </div>
  <div class="first-child">
    <div class="second-child"></div>
  </div>
</div>
0 голосов
/ 16 марта 2019

Если вы хотите показать идентификаторы всех элементов с самыми высокими z-индексами : 

function show_highest_z() {
    z_inds = []
    ids = []
    res = []
    $.map($('body *'), function(e, n) {
        if ($(e).css('position') != 'static') {
            z_inds.push(parseFloat($(e).css('z-index')) || 1)
            ids.push($(e).attr('id'))
        }
    })
    max_z = Math.max.apply(null, z_inds)
    for (i = 0; i < z_inds.length; i++) {
        if (z_inds[i] == max_z) {
            inner = {}
            inner.id = ids[i]
            inner.z_index = z_inds[i]
            res.push(inner)
        }
    }
    return (res)
}

Использование : 

show_highest_z()

Результат 

[{
    "id": "overlay_LlI4wrVtcuBcSof",
    "z_index": 999999
}, {
    "id": "overlay_IZ2l6piwCNpKxAH",
    "z_index": 999999
}]
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...