Jquery CSS定位：相对构建独立'；堆栈'；；或者：为什么蓝色害怕红色&；黄色的？

我需要做什么：我需要并排创建两个div。在每个分区内，我需要有绝对定位的图像。我还需要将这些图像从一个div拖到另一个div

我的问题是拖动的图像消失在另一个div后面。下面是一个示例，显示了当黄色div消失在蓝色容器后面时的问题

我的问题：有没有办法让蓝色容器识别黄色div的z索引（绝对位置），而黄色div将红色容器作为其锚点

一些背景：我需要实现这一点，因为我想从一个列表中拖动图像，然后将它们放到另一个可排序的列表中。我希望通过jQueryUI的可拖动、可拖放和可排序方法来实现这一点。到目前为止，一切都很简单和标准

但是，两个图像列表都必须是可滑动的。就其本身而言，使用jQueryUI的滑块方法可以相对容易地实现这一点。但是，要使图像滑动，我需要使用绝对定位（图像列表的实际滑动是通过更改绝对位置实现的）。因此，我无法绕过图中所示的相对和绝对位置

一如既往，我们非常感谢您的帮助

您可以：

仅将z索引应用于容器内的元素。（请确保不要将z索引应用于容器，否则它们将设置自己的堆叠上下文，而应用于其中任何内容的z索引仅与新上下文相关。）

从2个容器中删除位置：相对声明。如果没有任何z-index声明，定位元素将显示在非定位元素的前面

这里可以找到堆叠上下文的一个很好的解释：

更新
您可以尝试jQuery/UI draggable的helper:clone选项

由于它“克隆”了要拖动的项目（“用于拖动显示”），因此它不受与原始项目相同的容器的约束。但您需要处理这样一个事实，即在拖动“克隆”项目时，项目仍然显示在其原始位置

您可以使用DragTable的开始和停止事件使原始文件不可见并再次可见：

$('.myDiv')
    .draggable({
        helper: 'clone',
        start: function () {
            $(this).css('visibility', 'hidden');
        },
        stop: function () {
            $(this).css('visibility', 'visible');
        }
    })

…但是，正如安德里斯所建议的那样，你需要处理掉物品时发生的事情。为此，我建议您阅读以下帖子：

---

祝你好运。

不确定代码，但只是一个想法：如果你在被拖动时这样做了，会怎么样，该图像将停止将其父div作为父div，并将成为另一个div的子div？请参阅我的更新以了解仅使用CSS的替代方法。我不确定是否存在问题，因为黄色div上的z-index工作正常：-编辑：我应该添加我正在使用Chrome，以防万一，它是特定于浏览器的。+1此外，jqueryui的draggable插件采用了zindex便利选项，这可能有助于以干净的方式实现这一点<代码>$（'my-selector'）。可拖动（'option'，'zindex'，value）谢谢大家，看了你们的回复/评论后，我明白我根本无法如愿。不过，Andrius关于用jQuery更换父母的评论可能会奏效。我该怎么做？