найти divs в слоях (z-index) над другим div

Question

У меня есть прозрачные div, которые могут потенциально перекрываться. Они могут быть расположены в «порядке z» либо с помощью явного CSS z-order, либо по умолчанию для DOM-заказа. В соответствии со спецификацией стиля существует множество комбинаций DOM-упорядочения, z-index и display, которые влияют на итоговое эффективное положение z элемента.

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

В центре моего вопроса находится только на z-порядок. Под «find» я имею в виду, имея (javascript/jquery) алгоритм для выбора или повторения элементов выше/ниже.

примечания: Глядя на документацию, я думаю

https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/

немного лучше, чем читать

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Было бы лучше, если бы можно было бы запросить «рендеринг движок "так или иначе - ведь клик в заданной xy-позиции напрямую вызывает верхний элемент (в этом месте) - так что информация уже есть где-то ...!?

Answer 1

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

$("div").on("click", function() { 
      var div = $(this); 
      $('body').find('*').each(function() { 
       if($(this).width() > 0 && $(this).height() > 0) { 
        if((($(this).offset().left <= div.offset().left && $(this).offset().left+$(this).width() >= div.offset().left) 
         || ($(this).offset().left < div.offset().left+div.width() && $(this).offset().left > div.offset().left)) 
         && (($(this).offset().top <= div.offset().top && $(this).offset().top+$(this).height() >= div.offset().top) 
         || ($(this).offset().top < div.offset().top+div.height() && $(this).offset().top > div.offset().top) 
         )) { 
         console.log($(this)); 
        } 
       } 
      }); 
      return false; 
     });