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 にリンクする場合、フォーラムでコードが必要になるため、これのみを含めました。

この問題は 2 つの方法で解決できます。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; 
}

更新されたフィドルは次のとおりです: http://jsfiddle.net/2Xu2P/10/