JQuery-UIのドラッグ可能な要素がドロップされたときに他の要素の上に表示される

Question

ある項目の項目を別の項目にドラッグできるようにするためにJQuery-UIを使用していますが、他のドロップされた要素の私は間違って何をしていますか？

 //These are my draggable elements 
     $('#interface li').draggable({ 
      helper: 'clone', 
      revert: 'invalid' 
     }); 

     //This function makes dropped elements draggable again. 
     function foo(){ 
      $('.foo').each(function() { 
       $(this).draggable({ 
        containment: $(this).parent(), 
        stack: '.foo' 
       }); 
      }); 
     } 

     //This function forms table around dropped item 
     var fooCount = $('.foo').length; 
     $('#mainDiv').droppable({ 
      drop: function(event, ui) { 
       if (!ui.draggable.hasClass('foo')) { 
        var Class = ui.draggable.attr("class"); 
        var title = ui.draggable.text().trim(); 
        var item = $('<table class="foo elementTable ' + Class + '" name="' + title + '" id="'+(fooCount+1)+'"><tr class="tableHeader"><th class="thClass"><button class="settings">set</button>' + title + '<span class="close">x</span></th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>'); 
        $(this).append(item); 
        fooCount += 1; 
        foo(); 
       } 
      } 
     }); 

これは、新しく作成されたテーブルをスタイリングのための私のCSSコードです：

.foo { 
    min-width: 250px; 
    max-width: 300px; 
    text-align: center; 
    min-height: 50px; 
    border: 1px solid white; 
    border-radius: 10px; 
    position: absolute; 
    padding: 0; 
} 

しかし、落下の要素は次のように表示されます。

私は彼らがこのように表示します：

EDIT：https://jsfiddle.net/vaxobasilidze/79kd1uLL/

Answer 1

ただ、新しく作成された要素からposition: absolute;を削除します。ここでは、作業jsfiffleです。それは私が試してみましたが、すべてが完全に台無しにされます

.foo { 
    min-width: 250px; 
    max-width: 300px; 
    text-align: center; 
    min-height: 50px; 
    border: 1px solid white; 
    border-radius: 10px; 
    /*position: absolute;*/ 
    padding: 0; 
} 

チェック更新フィドルhere