如何将一个 jQuery UI 的可拖动组保持在另一个之上？答案

【问题标题】：How to keep one jQuery UI's draggable group above the other?如何将一个 jQuery UI 的可拖动组保持在另一个之上？
【发布时间】：2012-12-28 07:43:57
【问题描述】：

我有 2 类 div，我可以通过堆栈选项集对其应用可拖动的 div。

我怎样才能使这些类中的一个（类“A”）浮动在另一个类（类“B”）之上，这样无论对象是否在 B 中移动，A 中的所有元素都保持在所有元素之上B中的元素？

CSS：

div { opacity:0.5; position:absolute; font-size:2em; padding:20px; }

.above { background:green; }
.below { background:red; }

JS：

$("div").draggable({ stack:'div' });

HTML：

<div class="above" style="left:30px; top:0px">A1</div>
<div class="above" style="left:60px; top:0px">A2</div>
<div class="above" style="left:90px; top:0px">A3</div>

<div class="below" style="left:30px; top:30px">B1</div>
<div class="below" style="left:60px; top:30px">B2</div>
<div class="below" style="left:90px; top:30px">B3</div>

小提琴：

http://jsfiddle.net/4Cje9/2/

【问题讨论】：

你有一些代码我们可以看看吗？如果您提供编码示例，我们会更容易为您提供帮助 :) www.jsfiddle.net 是一个很好的资源。
@Kyle 感谢您的建议，这是链接：bit.ly/UpQTpZ
-1，将您的代码内联。不要只是把它放在 jsfiddle 中，绝对不要使用 URL 缩短器来绕过内容过滤器。
@user1933711，我已经为你完成了你的工作。如果您有机会提出更多问题，请按照此示例进行操作。请注意，当您在问题中包含代码时，如何发布指向 jsfiddle 的链接工作？

标签： javascript jquery html css

【解决方案1】：

举个例子：

HTML

<div id="container">
    <div id="navi">a</div>
    <div id="infoi"><img src="info_icon2.png" height="20" width="32"/>b</div>
</div>

CSS

#container {
    width: 100px;
    height: 100px;
    position: relative;
}

#navi, 
#infoi {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#infoi {
    z-index: 10;
}

将这些样式添加到两个各自的 div 中。它将解决您的问题。我建议使用position: absolute 了解position: relative 和子元素。

【讨论】：