Javascript jqueryui：在排序表的顶部显示div

当我单击可排序的div元素时，我需要在可排序表的顶部显示一个div，当我点击排序表时，橙色的div应该显示在顶部，而不是显示在下面。这个代码怎么了

Javascript：

$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();

$( ".ui-state-default" ).bind( "click", function(e) {
    var menu = $('<div id="menu" style="width:100px;height:100px;background-color:orange;position:absolute" />');
    $( this ).append(menu);
    menu.css('top', e.clientY+'px' );
    menu.css('left', e.clientX+'px' );
});

$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
$（“.ui状态默认值”）.bind（“单击”，函数（e）{
变量菜单=$（''）；
$（此）.append（菜单）；
css（'top'，e.clientY+'px'）；
css（'left'，e.clientX+'px'）；
});

以及HTML：

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
</ul>

第1项
第2项
第3项
第4项

这是原因Z索引，设置Z索引：1000；或者更多

---

Z-index属性设置元素的堆栈顺序。

是的，必须使用Z-index。默认情况下，z索引不会出现。 z索引的值可以从0开始

我已经更新了你的小提琴，还添加了

$('#menu').remove();

单击多次时仅显示一个橙色div。

---

希望这能帮到你。

谢谢你的回答，不幸的是哈苏克罗诺斯先回答了