jquery - CSS定位: relative builds independent 'stacks' ; or: why is blue afraid of red & yellow?

Question

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

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

我的问题:有没有办法让蓝色容器识别黄色 div 的 z-index(绝对位置)，而黄色 div 将红色容器作为其 anchor ？

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

但是，两个图像列表都必须是可滑动的。就其本身而言，使用 jQuery UI 的 slider 方法可以相对轻松地实现这一点。但是，为了使图像滑动，我需要使用绝对定位(图像列表的实际滑动是通过更改绝对位置来实现的)。因此，我无法绕过 jsFiddle 中所示的相对和绝对定位。 .

一如既往，我们非常感谢任何帮助!

Answer 1

您可以:

1. 仅将 z-index 应用于容器内的元素。 (并且请确保不将 z-index 应用于容器，否则它们将设置自己的堆叠上下文，并且应用于其中任何内容的 z-index 仅相对于新上下文。)

2. 从 2 个容器中删除position:relative 声明。如果没有任何 z-index 声明，定位元素将出现在非定位元素前面。

可以在这里找到堆栈上下文的很好的解释: http://timkadlec.com/2008/01/detailed-look-at-stacking-in-css/

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

由于它“克隆”了您想要拖动的元素(“用于拖动显示”)，因此它不受与原始元素相同的容器的约束。但是您需要处理这样一个事实:当“克隆”元素被拖动时，该元素仍然显示在其原始位置。

可以利用draggable的start和stop事件让原来的不可见又重新可见:

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

...但是，正如 Andrius 所建议的那样，您需要处理该元素掉落时会发生的情况。为此，我建议查看这篇文章:clone node on drag

祝你好运。