-4

スタック オプション セットでドラッグ可能を適用する 2 つのクラスの div があります。

これらのクラスの 1 つ (クラス "A") を他のクラス (クラス "B") の上に浮かせて、オブジェクトが B で移動されても、A のすべての要素が 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/

4

1 に答える 1

0

例を見てみましょう：

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;
}

これらのスタイルを2つのそれぞれのdivに追加すると、問題が解決します。position: relativeと子要素について学習することをお勧めしposition: absoluteます。

于 2012-12-28T07:56:19.883 に答える