jquery-ui - 为什么拖动到目标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中删除position:relative样式:

有人看到发生了什么吗？

谢谢。

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; 
}

这是您更新的 fiddle :http://jsfiddle.net/2Xu2P/10/