Как найти элемент, который больше всего находится поверх всех видимых элементов? (Ближайший к пользователю)

Question

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

Я знаю, что где-то читал, там будет относительно новой (может быть, лет) командой javascript, позволяющей браузеру выполнять эту работу, но я больше не могу найти ссылку.

[ Изменить: я помню, что была 3-D вид страниц html в инструментах разработчика прежних Firefox версий. (Насколько я помню, он был удален.) Этот инструмент должен содержать алгоритм для определения эффективного порядка элементов. Только что проверил скриншоты Firefox бывшего инструмента трехмерного просмотра, и похоже, что он на самом деле не ищет ближайший элемент, а просто выполняет простой стек. Вроде тупик. ]

Answer 1

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

Как только вы закончите, просто верните ссылку с наивысшим индексом.

const computeHigestElement = (elementsOrSelector) => {
  const elements = typeof elementsOrSelector === 'string'
    ? document.querySelectorAll(elementsOrSelector) : elementsOrSelector
  return [...elements].reduce((higest, el, index) => {
    const zIndex = document.defaultView.getComputedStyle(el, null)
      .getPropertyValue('z-index');
    return !isNaN(zIndex) && parseInt(zIndex, 10) > higest.index
      ? Object.assign(higest, { ref: el, index: parseInt(zIndex, 10) })
      : higest
  }, { ref: null, index: -1 }).ref // <-- Return the highest element
}

console.log(`Top element: ${computeHigestElement('.card').textContent}`)

body {
  position: relative;
  padding: 10px;
}

.card {
  position: absolute;
  width: 120px;
  height: 180px;
  border: thin solid grey;
  text-align: center;
  line-height: 180px;
}

.card:nth-child(1) {
  background: green;
}

.card:nth-child(2) {
  background: red;
  top: 50px;
  left: 50px;
}

.card:nth-child(3) {
  background: blue;
  top: 25px;
  left: 100px;
}

.as-console-wrapper {
  z-index: 1000;
}

<div class="card" style="z-index:50">Middle</div>
<div class="card" style="z-index:100">Top</div>
<div class="card" style="z-index:auto">Bottom</div>

Answer 2

Вы можете создать getHighestZindex функцию, которая определяется следующим образом:

function getHighestZindex(elem)
{
  const elems = document.getElementsByTagName(elem);
  let top = 0;
  for (let i = 0; i < elems.length; i++)
  {
    const zindex = document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("z-index");
    if ((zindex > top) && (zindex != 'auto'))
    {
      top = zindex;
    }
  }
  return top;
}

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

getHighestZIndex('div');

РЕДАКТИРОВАТЬ

Будет два варианта использования, чтобы проверить, какой элемент находится наверху

• Если ни один из элементов не имеет z-index, определенного в css
• Если какой-либо элемент или все элементы имеют спецификации c z-index, определенные в css.

Таким образом, в функцию будет добавлена ​​проверка has_allauto ...

Допустим, у вас есть код html, как показано ниже:

<div id="block-1">
 <div id="inner-block"></div>
</div>
<div id="block-2"></div>

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

function getHighestZindex(elem) {
  const elems = document.getElementsByTagName(elem);
  let id = "";
  let top = 0;
  let has_allauto = true;
  for (let i = 0; i < elems.length; i++) {
    const zindex = document.defaultView
      .getComputedStyle(elems[i], null)
      .getPropertyValue("z-index");

    if (zindex !== "auto") {
      has_allauto = false;
    }

    if (zindex > top && zindex != "auto") {
      top = zindex;
      id = elems[i].id;
    }
  }
  if(has_allauto) {
    id = elems[elems.length-1].id;
  }
  return id;
}

Это вернет id элемента, который находится в верхней части представления.

Рабочий пример Пример