为什么拖动落后于目标div？

Question

我将div拖入另一个div并且克隆在后面目标div：

HTML

 <div id="widget_area"> 
    <div id="orangeBox" class="widget"> </div>
</div>
<div id="page">
</div>

在http://jsfiddle.net/stevea/2Xu2P/8/有一个jsFiddle，它比这更好地显示了HTML，jQuery和CSS。只包括这个，因为论坛需要一些代码，如果你链接到一个jsFiddle。

我可以通过两种方式解决问题：删除widget_area div：

或删除位置：目标div的相对样式：

有谁看到发生了什么？

感谢。

Answer 1

为两个容器定义z-index并使橙色容器的值更高 即：

.widget {
  width:98px;
   height:98px;
   background-color:orange;
   border:1px solid black;
   cursor:pointer;
   z-index: 3; 
}
div#page {
    width:500px;
    height:300px;
    background-color:#3a8;
    border:3px solid black;
    position:relative;    
    z-index: 1; 
}

这是您更新的小提琴：http://jsfiddle.net/2Xu2P/10/