Question

Without calculating the element’s position and then firing your own “event”.

original fiddle (can be fixed with z-index)

better fiddle (a situation where z-index can’t work)

<div class='under'></div>
<div class='over'></div>

.over { 
  display:inline-block;
  position:absolute;
  height:100px;
  width:100px;
  background: rgba(0, 255, 0, .3);
}

.under {
  display:inline-block;
  position:absolute;
  height:26px;
  width:26px;
  top:37px;
  left:37px;
  background:rgba(0, 0, 255, 1);
}

Answer 1

Unless I’ve missed the point of your example, you can just add a z-index attribute to your CSS:

.over 
{
    display:inline-block;
    position:absolute;
    height:100px;
    width:100px;
    background: rgba(0, 255, 0, .3);
    z-index:1;
}

.under 
{
    display:inline-block;
    position:absolute;
    height:26px;
    width:26px;
    top:37px;
    left:37px;
    background:rgba(0, 0, 255, 1);
    z-index:2;
}