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

Question

我有 2 类 div，我使用堆栈选项集对其应用可拖动。

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

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/

Answer 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: relative使用position: absolute.