Учитывая два абстрагированных HTML-элемента A и B в том же документе, как я могу узнать, какой из них "ближе" к пользователю (т.е. если они перекрываются, какой из них скрывает другой)?
Спецификация CSS W3C описывает контексты стекирования, которые должны реализовывать совместимые механизмы визуализации. Однако я не мог найти способ доступа к этой информации в программе JavaScript, кросс-браузерах или нет. Все, что я могу прочитать, это свойство css z-index
, которое само по себе не говорит много, так как большая часть времени установлена на auto
или даже когда выражается как числовое значение, не является надежным индикатором того, как это (если они принадлежат к различным контекстам статистики, сравнение z-индексов не имеет значения).
Обратите внимание, что меня интересуют элементы произвольные: если оба элемента находятся ниже указателя мыши, только один будет считаться "зависающим", поэтому я могу легко найти ближайший в этом случае, Тем не менее, я ищу более общее решение, предпочтительно такое, которое не предполагает повторного реализации алгоритма стекирования, который уже выполняет механизм рендеринга.
Обновление: Позвольте мне немного пояснить причину этого вопроса: недавно я рассмотрел вопрос , который выявил ограничение в jQuery drag и drop - во время сброса он не учитывает z-индексы, поэтому, если элемент скрывает другой, он все равно может выполнить операцию drop в элементе, который находится "позади". Хотя на связанный вопрос был дан ответ на конкретный случай OP, общая проблема сохраняется, и нет простого решения, о котором я знаю.
alex answer ниже полезно, но недостаточно для рассматриваемого случая: при перетаскивании сам перетаскиваемый элемент (или, точнее, его помощник) является самым верхним элементом под курсором мыши, поэтому elementFromPoint
вернет it вместо next верхнего элемента, который нам действительно нужен (обходной путь: стиль курсора, чтобы он помещался вне помощника). Другие стратегии пересечения, используемые jQuery, также учитывают больше, чем одну точку, что усложняет задачу определения самого верхнего элемента, который каким-то образом пересекает помощника. Возможность сравнить (или отсортировать) элементы по фактическому z-индексу сделает режим пересечения "z-index aware" жизнеспособным для общего случая.