CSS 定位：相对构建独立的“堆栈”；或者：为啥蓝色害怕红色和黄色？

Posted 2023-05-08

【中文标题】CSS 定位：相对构建独立的“堆栈”；或者：为啥蓝色害怕红色和黄色？

【英文标题】：CSS positioning: relative builds independent 'stacks'; or: why is blue afraid of red & yellow?CSS 定位：相对构建独立的“堆栈”；或者：为什么蓝色害怕红色和黄色？

【发布时间】：2012-05-21 18:43:50

【问题描述】：

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

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

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

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

但是，两个图像列表都必须是可滑动的。就其本身而言，这可以通过 jQuery UI 的滑块方法相对轻松地实现。然而，为了让图像滑动，我需要使用绝对定位（图像列表的实际滑动是通过改变绝对位置来实现的）。所以我无法绕过jsFiddle中所示的相对和绝对定位。

一如既往，非常感谢任何帮助！

【问题讨论】：

不确定代码，但只是一个想法：如果你这样做，当被拖动时，图像将不再以它的父 div 作为父，而是成为另一个 div 的子？跨度>

查看我的更新以获得仅使用 CSS 的替代方法。

我不确定是否存在问题，因为黄色 div 上的 z-index 工作正常：jsfiddle -编辑：我应该添加我正在使用 Chrome，以防万一它是浏览器的东西-具体的。

【参考方案1】：

您可以：

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

从 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

祝你好运。

【讨论】：

+1 此外，jQuery UI 的可拖动插件采用 zindex 便利选项，可能有助于以干净的方式执行此操作。 $('my-selector').draggable('option', 'zindex', value);

谢谢大家，看了你们的回复/cmets，我明白我根本无法按预期去做。不过，Andrius 关于用 jQuery 改变父母的评论可能会奏效。我该怎么做？