Why do I not get the element underneath the dropped element?

Question

my pen: http://codepen.io/helloworld/pen/XJMMxV

How can I get the element underneath the dropped element? At the moment I get the element which I dropped thats useless because I already get it via ui.draggable[0].

I do not want to introduce z-index for all elements. This causes more problems.

Just know that I use absolute position for the divs.

<div id="itemContainer"> 
  <div class="item i1">1</div>
  <div class="item i2">2</div>
  <div class="item i3">3</div> 
</div>

<!-- border-box => IE9+ -->
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body, html { 
  padding:0;
  margin:0;
  height:100%; 
}

.item{
  position:absolute; 
}

#itemContainer{
  background:orange;
  height:100%; 
  position:relative; 

}

.item.i1 {
   width: 50%; 
   height:50%;
   background:lightgreen;

}

.item.i2 {
   width: 50%; 
   height:50%;
   top:50%;
   background:lightgray;;
}

.item.i3 {
   width: 50%; 
   height:100%;  
   left: 50%;
   background:blue;   
}
.align-vertical-colums {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

$(document).ready(function () {
    $("#itemContainer > div").each(function (index, element) {
        $(element).draggable();  
        $(element).addClass("align-vertical-colums");
    });

  $("#itemContainer").droppable({       
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function (event, ui) {

          var element = document.elementFromPoint(event.clientX, event.clientY);        

        }
    });
});