web-dev-qa-db-ja.com

IE 6＆IE 7 Z-Index Problem

http://madisonlane.businesscatalyst.com

Div＃sign-postをdiv＃bottomの上に配置しようとしています。これは、IE6およびIE7を除くすべてのブラウザーで正常に動作します。誰が問題がここにあるかを見ることができますか？

また、IE6はdiv＃bottomの上部に追加の198pxを表示しています。

cssinternet-explorercross-browser
21
mattt

バリデーターのコメントに同意します-通常、バリデーションは役立ちます。しかし、それがIEのz-indexに対するいくつかのポインタでない場合は、次のようになります。

1）操作しているZ-indexの要素は同じレベルにある必要があります。 #bottomと#bodyのz-indexを設定する必要があります

これが実現可能でない場合

2）IE要素がposition:relative。そのプロパティを#bottomと#body（または#signpost）に適用してみてください

それがうまくいく方法を教えてください

ダーコ

20
Darko Z

ここでの答えのほとんどは間違っています。一部は機能しますが、彼らが述べる理由のためではありません。ここにいくつかの説明があります。

これは、z-indexが 仕様 に従って機能する方法です。

  • z-index値を任意の要素に与えることができます。そうしない場合、デフォルトでautoになります。
  • 配置された要素（つまり、positionとは異なるz-indexを持つデフォルトのstaticとは異なるauto属性を持つ要素）は、新しいスタッキングコンテキスト。スタッキングコンテキストは、オーバーラップの「単位」です。 1つのスタックコンテキストが別のスタックコンテキストの上にある（つまり、最初のすべての要素が2番目の要素よりも上にある）か、完全にその下にある。
  • 同じスタックコンテキスト内で、要素のスタックレベルが比較されます。明示的なz-index値を持つ要素は、その値をスタックレベルとして持ち、他の要素は親から継承します。スタックレベルの高い要素が一番上に表示されます。 2つの要素のスタックレベルが同じである場合、通常、DOMツリーの後半にある要素が上に描画されます。 （異なるposition属性がある場合は、より複雑なルールが適用されます。）

つまり、2つの要素にz-indexが設定されている場合、どちらを上に表示するかを決定するには、z-indexも設定されている配置された親があるかどうかを確認する必要があります。そうでない場合、または親が共通している場合は、Zインデックスが高い方が優先されます。もしそうなら、あなたは両親を比較する必要があり、子供の_z-indexは関係ありません。

したがって、z-indexは、要素をその「スタック親」の他の子（z-indexセットとpositionがrelativeの最も近い祖先と比較して配置する方法を決定します、absoluteまたはfixed）ですが、他の要素と比較する場合は関係ありません。カウントするのは、スタッキングペアレントのz-index（またはスタッキングペアレントのスタッキングペアレントのz-index）です。ドロップダウンメニューやポップアップなどのいくつかの要素でのみz-indexを使用する一般的なドキュメントでは、どれも他を含まず、z-indexを持つすべての要素のスタック親はドキュメント全体です。そして、通常、z-indexをグローバルなドキュメントレベルの順序付けと考えることをやめることができます。

IE6/7との根本的な違いは、配置された要素がz-indexが設定されているかどうかに関係なく、新しいスタックコンテキストを開始することです。 z-index値を本能的に割り当てる要素は通常、絶対的に配置され、相対的に配置された親または親の祖先があるため、z-index- ed要素はまったく比較されません。代わりに、それらの配置された祖先は、Zインデックスが設定されていないため、ドキュメントの順序が優先されます。

回避策として、実際に比較される祖先を見つけ、それらにいくつかのZインデックスを割り当てて、希望する順序（通常はドキュメントの逆順）に戻す必要があります。通常、これはJavaScriptによって行われます-ドロップダウンメニューの場合、メニューコンテナーまたは親メニュー項目をウォークスルーして、それらに1000、999、998などのz-indexを割り当てることができます。別の方法：ポップアップメニューまたはドロップダウンメニューが表示されたら、相対的に配置されたすべての祖先を見つけて、非常に高いZインデックスを持つon-topクラスを指定します。それが再び見えなくなったら、クラスを削除します。

152
Tgr

私はこの問題を抱えていましたが、私が見つけた修正（Quirksmodeのおかげ）は、ノードのZインデックスを設定しようとしているノードの直接の親に、そのZインデックスのZインデックスを設定することでした。設定しようとしているノード。 IE6で機能する簡単な例を次に示します

<html>
  <head>
    <style type="text/css">
      #AlwaysOnTop {
        background-color: red;
        color: white;
        width: 300px;
        position: fixed;
        top: 0;
        z-index: 2;
      }
      #Header {
        color: white;
        width: 100%;
        text-align: center;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div id="Header">
      <div id="AlwaysOnTop">This will always be on top</div>
    </div>
    <div id="Content">Some long amount of text to produce a scroll bar</div>
  </body>
</html>
4
Jason Sperske

ようこそ、私は問題を解決しました：

.header { 
    position: relative;
    z-index: 1001;
}
.content {
    position: relative;
    z-index: 1000;
}
1
remx

不正なHTMLが含まれているようです。カウントしてみましたが、開始タグと終了タグの数を失ったかもしれませんが、div＃containerが閉じられていないようです。バリデーター（W3CのHTMLバリデーターなど）を使用してページを実行し、いくつかのエラーを修正してください。これは、過去のこの種の問題の解決に役立ちました。幸運を！

0
Shalom Craimer

信頼できる唯一の解決策は、最上位の要素を配置することですコードの下にあり、次にそれらをプッシュします絶対配置を持つ他の要素.

例えばWordpress：ナビゲーションをフッターファイルに配置しますが、ページラッパー内に配置します。

最初にメニューをクロールせずにコンテンツから直接開始できるため、検索エンジンにいくつかの利点をもたらす可能性もあります...

更新：自分で修正する必要があります。要素を下に置いてからプッシュするのが最も簡単な方法ですが、妥当な時間内にこれが不可能な場合もあります。次にすべての親要素に何らかの位置付けと意味のあるz-indexがあることを確認する必要があります。その後、z-indexはIE7でも機能するはずです。

0
Waschbär

最近、あるレイヤーを別のレイヤーの上に表示する問題が発生しています。私の場合、JavaScriptでプログラムで2つのレイヤーを作成していました。1つはカスタムコントロールを表示するため、もう1つはその背後にフルスクリーンレイヤーを作成するためです。 FFは問題ありませんでした、bu IEは常に他のすべての上にフルスクリーンレイヤーを表示しました。

みんなの提案を試してインターウェブ上を何度もトロールした後、私が最終的に機能させる唯一の方法は、両方のレイヤーからposition:属性を削除し、満足のいく結果が得られるまでmargin-top:属性を微調整することでした。

少しのハッシュですが、機能し、IE 8が現在のバグをすべて整理するまでは問題ありません。

0
Paul Gordon