IE7 Z-Indexレイヤー化の問題

163

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

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

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>

css internet-explorer-7 z-index

— レズナ
ソース

：あなたの周りの仕事を探しているとあなたが再配置すべてのあなたのhtmlきれいにいくつかのスタック文脈にあるとされない場合は、これを試してくださいbrenelz.com/blog/squish-the-internet-explorer-z-index-bug

— Nasaralla

268

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

z-indexを指定すると、同じスタッキングコンテキスト内の他の要素を基準にして相対的に指定します。Z-indexに関するCSS仕様の段落では、新しいスタッキングコンテキストは、z-index以外の配置されたコンテンツに対してのみ作成されると述べていますオート、あなたは（あなたの文書全体を意味するが、単一のスタッキングコンテキストでなければなりません）でした残念ながらIE7解釈配信コンテンツをZインデックスせずに、このような新しいスタッキングコンテキストを：配置スパンを構築します。

つまり、次の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/を参照してください。親要素（この例ではエンベロープ1）に高いZインデックスを指定する理由は、エンベロープ1（メニューを含む）のすべての子がエンベロープ1（具体的には、エンベロープ2）のすべての兄弟と重複するためです。

Z-indexを使用すると、どのようにオーバーラップするかを明示的に定義できますが、Z-Indexがなくても、レイヤーの順序は適切に定義されています。最後に、IE6には、selectboxesとiframeが他のすべての上にフロートする原因となる追加のバグがあります。

— イーモン・ネルボンヌ
ソース

4

最終的にそれを解決しました:)-相対位置は本当に迷惑なので、私はどういうわけか「エンベロープ」要素なしであなたのアイデアを採用しました-それは問題を解決し、また機能するようです-提案ボックスのコードを少し再設計する必要があります-thx aロット

— rezna

6

要素の重なり方に影響を与える3つの異なる要素があります。それは、スタックコンテキスト、ソースの順序、ペイントの順序です。スタックコンテキストを扱うときに最も明白な問題が浮かび上がります。他の2つを知ることは、より難解な問題を理解するのに役立ちます。出典：CSS-Discuss Wiki。

— rjb

2

親要素にz-indexを追加するのはすばらしい解決策です

— Danyun Liu

2

わたしは、あなたを愛しています。親にposition：relativeとz-index：500を追加し、それを修正しました！

— Aymeric Gaurat-Apelli

2

私はこの問題をいじくり回し、解決策を示すコメントを付けました。jsfiddle.net/fNcGu/3

— クリストファージョンソン

15

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;
});
});

— Nixis
ソース

上記の「正しい」解決策を読んだ後、私は問題の自明な問題よりもかなり複雑な問題の解決策を定式化しようとしました。それから私はこの答えを入れました、そしてそれは魅力のように働きました。上記の解決策が正しい場合、これは確かに簡単な解決策です。ありがとう！

— ランドン2013年

11

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

バグを修正するために、親要素に高いz-index値（子のz-index値自体よりも高い場合もあります）を指定してみてください。

— ed1nh0
ソース

1

ありがとう。この解決策は、親コンテナのz-indexを与えることで私にとってうまくいきましたが、必ずしも子のz-indexよりも高くはありません。

— neelmeg 2013

4

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

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

それに関する問題は、これにより要素のすべてのコンテンツですべてのホバーとクリックアクションが無効になったz-index:-1ため、ページ全体の親要素に移動して、position:relative; z-index:1

これは問題を修正し、正しいレイヤー機能を保持しました。

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

— Lukeroxout
ソース

3

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

div {z-index：10; }

スライダーなどの上に表示する、ナビゲーションなどの無関係なdivのZインデックス用。スライダーdiv自体に単にZインデックスを追加することはできませんでした。

— eBarソリューション
ソース

これに加えてhtml {z-index:1; position:relative;}、IEのカルーセル画像をメニューで表示できることがわかりました。

— bassplayer7 2013年

2

前述の親ノードのより高いz-indexがニーズに合わない場合は、代替ソリューションを作成し、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;
});

— スフェロイド
ソース

非常に素晴らしい！機能検出は間違いなく進むべき道です。

— Jason

1

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

— c2j
ソース

0

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

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

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

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

— イーモン・ネルボンヌ
ソース

IE6のz-indexバグについて知っています-これは修正されました-しかし、IE7には比較的/絶対的な位置の要素/入力に別の問題があります（これはIE8で修正されています）-いくつかの解決策（zインデックスで遊ぶ）を見つけましたが、それらのどれもうまくいきませんでした-それが私がそこで尋ねている理由です...とにかく答えのためにthx。

— rezna 2009

0

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

— ジェレミー・カウフマン
ソース

0

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

— マルコ
ソース

0

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

— ルーカス
ソース