当 div 可滚动时，div 中的可拖动元素显示在放置区域后面，需要它们显示在前面

Question

编辑：我能够弄清楚一些事情，这个小提琴反映了变化：http://jsfiddle.net/Kw27r/5/

我有一个 div ( #gallery)，其中包含一组可拖动的图块。它们将被拖放到另一个#imageDropContainer包含多个拖放区域的 div ( ) 中。这是我遇到的问题：

当#gallery的overflow-y属性设置为可见时，一切正常。但是，#gallery必须具有固定的高度，这意味着它一次只能显示 2 行图块。因此，如果溢出设置为可见，您将看不到第三行中的任何内容，因为它“隐藏”#imageDropContainer在紧接下面的后面#gallery。如果将 div 设置为可滚动，则可以滚动到 div 中的其他元素，但在拖动它们时，图块会“隐藏”在放置区域后面。

如何允许 div 保持可滚动，但可拖动图块在拖动时不会隐藏在放置区域后面？换句话说，如何规避“溢出”属性的标准行为？

这是一个小提琴来演示：

http://jsfiddle.net/Kw27r/4/

我认为“相关”的 JS 和 CSS 显示在小提琴中。如果我忽略了一些东西，其他背景 CSS 和 JS 可以从选项卡中查看external resources。

谢谢阅读！

Answer 1

好吧，我看到你自己回答了，但你的问题让我困惑，我想探索它（我不想让我的“研究”白费）。

您原来的解决方案永远不会按照溢出定义工作。

我做了一个简单的演示，应该可以帮助您理解这个问题。您必须将拖动的内容放在overflow:scroll框外。就像你自己的答案一样。

Overflow:visible 让盒子里的东西流出。因此，您可以打破盒子并转到页面上的任何位置。

Overflow:hidden 禁止盒子内容流出。不适合可见区域的内容将被隐藏。

Overflow:scroll 也不允许盒子内容流出。但是，内容将随着滚动条保持可用（在演示中，可拖动的图像将移动滚动条，这是有趣的效果）。

但尝试移动演示中的图像，您就会明白我的意思。