Jquery ui 将z索引设置为动态生成的图像标签，以防止重叠标签从图像中隐藏

我正在实现拖放，用户可以拖放几个图像并将它们放到一个div中，当用户单击按钮时，我会动态地向每个图像添加一个p标记作为标签

目前我遇到的问题是，当我有两个图像，这是非常接近对方（一个是在另一个上面）。顶部图像附加的p标记将被底部图像隐藏。我尝试为每个删除的图像提醒z索引，发现它是“自动”的。我想我需要为每个div分配一个新的z索引，但我尝试了在函数中添加标签，结果它无法正常工作：

 function generateLabel() {
      var current = 5000;
      $('#rightframe img').each(function () {
        var cImgName = $(this).attr('id');
        var width = $(this).width();

        // To select the respective div
        var temp = "div#" + cImgName;
        $.ajax({
            url: '/kitchen/generatelabel',
            type: 'GET',
            data: { containerImgName: cImgName },
            async: false,
            success: function (result) {
                $(temp).append(result);
                // I guess the each function loop through each div according to the time it is created, so I try to assign a decreasing z-index 
                $(temp).css('z-index', current);
                current -= 100;
                // To select the label for the image
                temp += " p";
                // Set label width based on image width
                $(temp).width(width);
            }
        });
    });

然而，我得到的是，稍后删除的底部图像不会隐藏上面图像的标签，但是如果上面的图像是在比底部图像之后删除的，那么上面图像的标签会被底部图像隐藏

这是一个非常特殊的情况，我希望我能说清楚

---

希望能在这里得到一些帮助。。。感谢您的反馈。

我很高兴能为这类奇怪的问题找到解决方案。我得到了一个有用的插件，jquery overlaps，它检查两个dom是否相互重叠。然后，我相应地为标签指定一个z索引

为了在这里展示我的解决方案，以防有人跳进这个瓶颈：）

---

谢谢D

进行拖放操作，直到出现问题。。。检查这些元素的z索引。我把你的脚本扔了，我想你不会得到你想要的结果，除了z索引。

 // To assign an increasing z-index to the label
        var count = 100;
        $('#rightdiv p').each(function () {
            // If any label overlaps with the image (used overlaps plugin)
            if ($(this).overlaps($('#rightdiv img'))) {
                // Increase count (the z-index)
                count += 10;
                // Set the parent div z-index 1st, if not the label z-index do not have effect
                $(this).parent().css('z-index', count);
                $(this).css('z-index', count);
            }

        });