jqueryUI可拖拽自定義幫手後面相對定位div

Question

我正在與一個拖放事件調度應用程序打架。我有一些相對定位的塊，我的可拖動的自定義助手就在他們後面。我已經嘗試了各種修復，例如調整不同塊的z索引，使用可拖動的「堆棧」選項等。但唯一似乎工作的是從相對塊中移除「位置：相對」，這不是「真的是一個選擇。

HTML：

<div id="container-one"> 
    <div class="draggable" id="drag-block"></div> 

</div> 

<div id="container-two"> 
    <div class="static-block" id="block-one"></div> 
    <div class="static-block" id="block-two"></div> 
    <div class="static-block" id="block-three"></div> 
</div> 

JS：

$(function(){ 
    $('.draggable').draggable({ 
     cursorAt: { bottom: 0, left: 20 }, 
     helper: function(event) 
     { 
      return $("<div class='drag-helper'><h2><i class='fa fa-plus-circle'></i></h2></div>"); 
     } 
    }); 
}); 

CSS：

#container-one { 
    background-color: orange; 
    width: 200px; 
    height: 400px; 
    display: inline-block; 
} 

#drag-block { 
    background-color: purple; 
    color: white; 
    text-align: center; 
    height: 50px; 
    width: 50px; 

} 

#container-two { 
    background-color: green; 
    height: 400px; 
    width: 500px; 
    display: inline-block; 
} 

.static-block { 
    height: 80px; 
    width: 40px; 
    background-color: cornflowerblue; 
} 

#block-one { 
    position: relative; 
    top: 0; 
    left: 40px; 
} 

#block-two { 
    position: relative; 
    top: 50px; 
    left: 70px; 
} 

#block-three { 
    position: relative; 
    top: 25px; 
    left: 140px; 
} 

.drag-helper { 
    color: yellow; 
    text-shadow: 1px 1px 2px #363636; 
} 

p { 
    font-size: 14pt; 
} 

任何想法？ http://jsfiddle.net/voveson/08L32rye/

Answer 1

使用的z-index

只是一個簡單的解決辦法：

.drag-helper { 
    color: yellow; 
    text-shadow: 1px 1px 2px #363636; 
    z-index: 10; // <--- 
} 

爲我工作的罰款！

http://jsfiddle.net/myawfhx6/1/