148

コンソール (chrome\firefox) を開き、次の行を実行しました。

$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");

#popupContent は何よりも重要ですが、#popupFrame の不透明度の影響を受けます。

コンテンツは #popupFrame に含まれていないため、これは非常に奇妙です。

目標は、アラートボックスのようなFirefoxを作成することです

4

7 に答える 7

280

2 番目の div はposition: static(デフォルト) なので、z-index は適用されません。

to を付けたいものはすべて配置する必要があります ( position プロパティを 以外に設定します。この場合staticはおそらく必要です) 。relativez-index

于 2013-01-23T15:50:06.083 に答える
53

不透明度は、静的な配置と同様に、z-index のコンテキストを変更します。不透明度を持たない要素に不透明度を追加するか、不透明度を持つ要素から不透明度を削除します。また、両方の要素を静的に配置するか、相対位置または絶対位置を指定する必要があります。コンテキストの背景は次のとおりです。http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

于 2013-01-23T15:49:59.657 に答える
40

z-index明示的な位置が与えられた要素にのみ適用されます。position:relative#popupContent に追加すると、準備完了です。

于 2013-01-23T15:51:26.430 に答える