Dados dois elementos HTML arbitrários A e B na mesma página, como posso descobrir qual deles está "mais próximo" do usuário (i.e. se eles se sobrepusessem, qual deles obscureceria o outro)?
A especificação CSS do W3C descreve "contextos de empilhamento" (stacking contexts), que as engines de renderização que seguem os padrões devem implementar. Entretanto, não consegui encontrar um meio de acessar essa informação via JavaScript. Tudo a que tenho acesso é a propriedade css z-index
, que por si só não diz muito, uma vez que na maior parte dos casos está como auto
e - mesmo quando expressa por um número - não é um indicador confiável de como os elementos estão realmente exibidos (pois se eles pertencem a contextos de empilhamento diferentes, comparar z-índices é irrelevante).
Observação: eu estou interessado em elementos arbitrários; se ambos estão sob o ponteiro do mouse, apenas um será considerado "hovered", de modo que determinar o mais próximo é trivial. Da mesma forma, se eu souber que eles se intersectam num ponto específico, posso usar document.elementFromPoint()
tal como sugerido nessa resposta no SO em inglês. Entretanto, pode não ser o caso de eu conhecer um ponto assim, ou mesmo dele existir - os elementos podem não ter interseção um com outro.
Existe alguma solução geral para esse problema, de preferência uma que não envolva reimplementar o algoritmo de empilhamento que a engine de renderização já está fazendo de qualquer forma?
Motivação: existe uma limitação na fucionalidade "arrastar-e-soltar" (drag-and-drop) do jQuery, onde não é possível decidir com certeza onde soltar um elemento arrastado:
Versões antigas do jQuery escolheriam um deles meio que ao acaso, enquanto versões recentes realizam o drop em ambos (mais detalhes nessa tentativa fracassada de resposta). O ideal seria escolher apenas um deles - o que está "mais próximo da tela"* - e fazer o drop só nele, e para isso eu preciso de um meio correto de determinar seu z-index real (ainda que isso envolva "re-inventar a roda", desde que o resultado seja consistente com o empilhamento realizado pelo browser).
*Outra opção, como apontado por @utluiz, seria levar a área de interseção em consideração ao determinar o alvo correto - seja exigindo que o helper esteja totalmente contido no alvo, seja escolhendo o alvo com maior área de interseção (por exemplo, se está visualmente claro qual é o alvo correto, mas uma "pontinha" do helper toca um elemento distinto). Mas infelizmente, mesmo para calcular corretamente essa área de interseção é necessário se conhecer os índices z relativos, pois ela muda se um obscurece o outro.
Atualização: uma solução aparentemente basante completa foi postada no SOen, o código completo está no GitHub e há um exemplo de uso no jsFiddle. À primeira vista parece ok, mas qualquer feedback adicional seria muito bem-vindo. Se tudo estiver correto, posto depois aqui como resposta.
z-index
comwindow.getComputedStyle( elemento ).getPropertyValue("z-index")