1 
<div class="content-wrapper">
    <div class="popup">
        <div class="close">
        </div>
    </div>
</div>

.content-wrapperは比較的配置されており、すべてのページコンテンツ（ポップアップだけでなく）が含まれています。

.popupは絶対に配置されます。

.closeも絶対に配置されます。

カーソルがポップアップに入ったときに閉じるJavaScriptがあります（そのため、横に素敵なクローズバーが表示されます）。これを行うために私が見つけた最良の方法は、jQueryanimateを使用して移動することです。非表示/表示すると、.stop（）で解決できなかった場合でも、吃音の影響が生じます。私の問題は、.popupの後ろに.closeを隠そうとすることです。2つのdivに設定したz-indexに関係なく、.closeは.popupの後ろに配置されません。

絶対位置にある別のdivをその親の後ろに配置することは可能ですか？その場合はどうすればよいですか？

4

3 に答える 3

5

はい、z-indexを使用してください：http：//jsfiddle.net/tGd4Q/

HTML：

<div class="content-wrapper">
    <div class="popup">
        <div class="close">
        </div>
    </div>
</div>​

CSS：

.popup, .close { position: absolute; height: 200px; width: 200px; }
.popup { background: #f00; }
.close { background: #ff0; top: 25px; left: 25px; z-index: -1; }​

ただし、これはIE7標準では機能しません。jQuery（または選択した他のフレームワーク）を使用してdivを非表示にすることをお勧めします。

$('.popup .close').hide();
于 2012-04-05T14:24:26.790 に答える
2

スタッキングインデックスはほとんどの場合兄弟に関連しているため、を使用して子を親の後ろに置くことはできませんz-index。

これについての詳細があります。

スタック順序は次のとおりです。

  1. 現在のスタッキングコンテキストの境界と背景
  2. 負のz-indexを持つ配置された子孫
  3. z-indexプロパティが定義されていない、位置付けされていないブロックレベルの子孫（段落、テーブル、リストなど）
  4. フローティング子孫とその内容
  5. 配置されていないインラインコンテンツ
  6. z-index、z-index：auto、またはz-index：0のない配置された子孫
  7. z-indexが0より大きい配置された子孫

ニック・マコーマックはz-index: -1彼の答えに使用しています。これは確かにあなたの感情が与えるものの1つの例外です。あなたの要素の多くのz-index: -1後ろにある要素を背景に移動することに注意してください。

ブラウザの違い

その上、Internet Explorerは負のスタッキングインデックスをサポートしておらず、要素（子/親）の位置に非常に厳密です。すべての要素レベルには独自のスタッキングコンテキストがあるため、親要素を介して「通信」する必要があります。この説明を参照してください。

Smashing Magazineによるとselect、ウィンドウコントロールである要素は、当然、より高いスタッキングインデックスを持っています。

Shadowbox troubleElementオプションによると、私はそれを推測しobject、同じ問題embedを抱えています。canvas

隠したいのなら.close、後ろに動かすのではなく、本当に隠してみません.popupか？

$('.close').hide();
于 2012-04-05T14:24:54.657 に答える
0

いいえ、親の後ろに置くことはできません。ただし、表示モードをnoneに変更できるため、まったく表示されません。次に、divを表示する必要がある場合は、表示するように変更します。

単純なjQuery：

$('.close').hide();
$('.close').show();

display:none設定を使用して、または設定としてスタイルの属性を追加するなど、他の方法もありdisplay: inline-blockます。

更新：他の回答のコメントによると、z-indexでそれを行う方法があります。まだ非表示/表示を考えることは行く方法です。UIで何をしているかを非常に明確にします。

于 2012-04-05T14:25:46.313 に答える