How to place UI elements "on top" of each other?
Basically, for the game I'm working on, we have a system where we can drag UI elements from one area and drop them in another area, like a Diablo style inventory. In the first area, all the elements are sized the same, but once we drop them in the other area, the UI sprite changes to a different version. The problem is, some objects are interfering with others in that second area. The image is large enough that its bounding box goes over the other elements.
I don't know if I explained that well, but basically: The mouse is over element A visibly, but the invisible bounding box of element B crosses over the visible portion of element A and the mouse is over that bounding box. When I click to drag A, B is selected instead. Clearly, by default, B is on top of A, such that the graphical raycast when I click strikes B first. I can't move A across the canvas so that B doesn't interfere with it, due to the layout we have set up already, and I can't resize B because the artists will have problems if I resize their sprite art. How do I adjust things so that A is the first item the raycast hits?