将z-index设置为动态生成的图片标签，以防止重叠标签对图片隐藏

Question

我正在实现拖放，用户可以拖动一些图像并将它们放到div中，并且一旦用户单击按钮，我就会动态地将p标记作为标签附加到每个图像上。

目前我遇到了问题，当我有两个图像，这是非常接近彼此(一个是在另一个之上)。顶部图像的附加p标记将被底部图像隐藏。我试着提醒z-index每个被删除的图像，发现它是'auto‘。我想我需要为每个div分配一个新的z-index，但我尝试了附加标签的函数，它并不像预期的那样工作：

 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);
            }
        });
    });

然而，我得到的是，底部图像后来下降并没有隐藏上面图像的标签，但如果上面的图像是在底部图像之后下降的，上面图像的标签被底部图像隐藏。

这是一个非常具体的情况，我希望我能说清楚...

霍普可以在这里得到一些帮助。感谢您的反馈...

Answer 1

我很高兴我能为这个奇怪的问题找到一个解决方案。我得到了一个有用的插件，jquery-overlaps，它可以检查两个dom是否彼此重叠。然后，我相应地为标签分配一个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);
            }

        });

谢谢！:D