5

私はマップを使用してアプリケーションに取り組んでおり、隅に div があり、その中にいくつかのものがあります。この地図をクリックすると、小さなウィンドウにいくつかの情報が表示されます。ウィンドウは、場合によっては、コーナーの div によって覆われています。

逆の効果が必要です（ウィンドウがdivをカバーしています）。これは単に z-index の問題であると考えましたが、機能させることができません。これは IE7 の場合であり、少し調べてみると、配置されている要素内にない限り z-index は機能しないようです。

z-index が正しく機能するように要素が適切に配置されているように見えますが、うまくいきません。Firebug を介してスタイリングを追加してみましたが、何も変更することができませんでした。ウィンドウは実際には 2 つの div で構成されています。1 つは絶対配置されたもので、もう 1 つはその中の相対配置です。

ここで問題になる可能性があるのはz-indexだけですか、それとも私が知らない何かがありますか?

私が望む効果を達成するための他の方法はありますか？jquery などで div を単純に非表示にすることはできません。その一部は、マップ上で開くウィンドウの後ろから見えるはずだからです。

4

6 に答える 6

8

スタック コンテキスト バグが発生しています

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

IE で配置されたすべての div は、新しいスタッキング コンテキストを作成し、異なるスタッキング コンテキストからの z-index が他のものの上に来るのを防ぎます。

解決策は、必要なウィンドウをツリーの一番上に (たとえば本体に) 配置し、ウィンドウをカバーする他の div のすべての親の z-index よりも大きい z-index 値を設定することです。

ここの問題を理解するための広範な情報: http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

于 2009-03-26T22:51:50.037 に答える
1

配置と負のマージンは、私が知っている要素をオーバーラップさせる唯一の方法です。z-index は、要素をレイヤー化する方法をブラウザーに明示的に伝えるためにのみ使用されます。

あなたの問題に関しては、IEでは、 z-indexを適切に機能させるために、オーバーラップしているコンテナ要素および/または要素が必要ですposition:relative;。position:absolute;ポジショニングと言うときは、通常position、CSS でプロパティを設定することを暗示しています。また、z-index を使用する場合は、重複する要素が互いに同じレベルにあることを確認してください。

お役に立てれば

于 2009-03-26T22:52:59.753 に答える
1

簡単に言えば、HTML ファイル内の要素の順序によって、スタックの順序が決まります。要素を別の要素の上に配置したい場合は、HTML 内で後で来るようにしてください。

重なり順を入れ替えることができるのは、すべて同じ包含要素内にある要素だけです。たとえば、2 つの div があり、両方に 3 つの画像が含まれている場合、2 番目の div の画像を最初の div の画像の下に配置することはできません。

複雑なスタッキング オーダーが必要な場合は、事前に HTML を計画する必要があります。

于 2009-03-27T00:11:25.633 に答える
0

私は数日前にこの同じ問題に遭遇し、Darko Z によって提案された負のマージンがうまく機能することを発見しました. (私の担当者は、Darko に投票するにはまだ十分ではありません)

私はそれについて簡単な記事を書きました。

http://www.swards.net/2009/03/layering-html-elements-without-using.html

于 2009-03-26T23:25:36.073 に答える
0

他の回答で示唆されているように、IE で「stacking-context」position:relativeをリセットします。position:absolute

于 2009-03-26T22:57:45.467 に答える
0

より怠惰な答えが必要な場合は、javascript を使用して、マップをクリックしたときに div を非表示にし、マップを閉じるときに表示することができます。

とにかく、ページ上の任意の選択でこれを行う必要があります。つまり、z-index では機能しないためです。

于 2009-03-26T23:06:48.473 に答える