web-dev-qa-db-ja.com

IE7 Z-Indexの階層化の問題

IE7のz-indexバグの小さなテストケースを分離しましたが、それを修正する方法がわかりません。私は一日中z-indexで遊んでいます。

IE7のz-indexの何が問題になっていますか？

CSSをテストします。

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

テストHTML：

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>
cssinternet-explorer-7z-index
163
rezna

Z-indexは絶対的な測定値ではありません。 z-index：1000の要素は、z-index：1の要素の後ろにある可能性があります-それぞれの要素が属する限り異なるスタッキングコンテキスト。

Z-indexを指定する場合、同じスタッキングコンテキスト内の他の要素と相対的に指定します。ただし、 CSS仕様のZ-indexの段落 は、新しいスタッキングコンテキストは、配置されたコンテンツに対してのみ作成されますauto以外のz-index（ドキュメント全体が単一のスタッキングコンテキストであることを意味します）を使用すると、didポジショニングspan：残念ながらIE7は、z-indexを使用せずに配置されたコンテンツを新しいスタックコンテキストとして解釈します。

要するに、このCSSを追加してみてください。

#envelope-1 {position:relative; z-index:1;}

または、スパンにposition：relativeが含まれないようにドキュメントを再設計します。

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

このバグの同様の例については、 http://www.brenelz.com/blog/2009/02/03/squish-the-internet-Explorer-z-index-bug/ を参照してください。親要素（この例ではenvelope-1）に高いz-indexを設定する理由は、envelope-1のすべての子（メニューを含む）がenvelope-1（特にenvelope-2）のすべての兄弟とオーバーラップするためです。

Z-indexを使用すると、物事がどのように重なり合うかを明示的に定義できますが、 z-indexがなくても、レイヤーの順序は明確に定義されています 。最後に、IE6には、selectboxとiframeが他のすべての上に浮かぶ原因となる追加のバグがあります。

267
Eamon Nerbonne

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});
15
nixis

IEに配置された要素は、0のz-index値で始まる新しいスタックコンテキストを生成します。したがって、z-indexは正しく機能しません。

バグを修正するには、親要素に高いz-index値（子のz-index値自体よりも大きくすることもできます）を指定してください。

11
ed1nh0

私はこの問題に遭遇しましたが、HTMLの変更を要求する必要があり、全体の問題になる大規模なプロジェクトで、純粋なcssソリューションを探していました。

メインの本文コンテンツにposition:relative; z-index:-1を配置すると、ヘッダードロップダウンコンテンツがIE7の本文コンテンツの上に突然表示されます（他のすべてのブラウザーおよびIE8 +で既に問題なく表示されていました）

それに伴う問題は、z-index:-1を持つ要素内のすべてのコンテンツに対するすべてのホバーおよびクリックアクションを無効化したため、ページ全体の親要素に行き、position:relative; z-index:1を与えました

これにより問題が修正され、正しいレイヤー機能が保持されました。

少しハック感がありますが、必要に応じて機能しました。

4
lukeroxout

Ie7固有のスタイルシートのdivに特別なz-index指定を配置する必要があることがわかりました。

div {z-index：10; }

ナビゲーションなどの無関係なdivのz-indexがスライダーの上に表示されるようにします。スライダーdiv自体に単純にz-indexを追加することはできませんでした。

3
eBar Solutions

親ノードの前述の高z-indexingがニーズに合わない場合、代替ソリューションを作成し、IE条件付きコメントまたはModernizrが提供する（より理想的な）機能検出を使用して、問題のあるブラウザーをターゲットにすることができます。

Modernizrのクイック（および明らかに動作する）テスト：

Modernizr.addTest('compliantzindex', function(){
    var test  = document.createElement('div'),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    root.appendChild(test);
    test.style.position = 'relative';
    var ret = (test.style.zIndex !== 0);
    root.removeChild(test);

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});
2
spheroid

CSSの標準に対する異なる理解のためだけに、IEのバグではないように見えます。外部コンテナにz-indexが指定されていないが、内部要素に高いz-indexが指定されている場合。そのため、コンテナの兄弟は、高z-index要素にオーバーレイする可能性があります。そのような場合でも、IE7でのみ発生しますが、IE6、IE8、Firefoxは問題ありません。

1
c2j

IE7の開発者ツール（ツールバー）を使用して、他のdivの下にあるdivのコンテナに負のz-indexを追加することで解決しました。

0
Lucas

ドロップダウンメニューを作成してz-indexに問題がある場合は、同じ値のz-indexを作成することで解決できます（たとえば、z-index：999;）。親と子のdivにz-indexを置くだけでそれは問題を解決します。私はそれで問題を解決します。異なるZインデックスを配置すると、確かに、親divの上に子divが表示されますが、メニュータブからサブメニューdiv（ドロップダウンリスト）にマウスを移動すると、消えます...同じ値のZインデックスを配置して問題を解決します。

0
Marko

一般的なIE6では、特定のUI要素はネイティブコントロールで実装されます。これらのコントロールは、完全に独立したフェーズ（ウィンドウ？）でレンダリングされ、z-indexに関係なく、常に他のコントロールの上に表示されます。選択ボックスは、このような問題のある別のコントロールです。

この問題を回避する唯一の方法は、IEが別個の「ウィンドウ」としてレンダリングするコンテンツを構築することです。つまり、テキストボックス、またはより便利なことにiframeの上に選択ボックスを配置できます。

つまり、IEがこれらの組み込みUIコントロールを配置できるようにするには、メニューなどの「ホバー」をiframeに配置する必要があります。

これはIE7で修正されるはずでした（ http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx を参照）が、おそらく何らかの種類で実行されている互換モード？

0
Eamon Nerbonne

このバグは、標準の個別スタッキングコンテキストIEバグとは別の問題のようです。複数のスタックされた入力（基本的に各行にオートコンプリーターを持つテーブル）で同様の問題がありました。私が見つけた唯一の解決策は、各セルに減少するz-index値を与えることでした。

0
Jeremy Kauffman