Internet Explorer 7 で Z-Index の動作が異なるのはなぜですか?

IE7 Z-Index レイヤ化の問題: 包括的な理解

Internet Explorer 7 (IE7) は、z-index プロパティに関して独特の動作をします、Web ページ上の要素の積み重ね順序を決定する役割を果たします。この動作は、特に複数の重なり合う要素を操作する場合に、予期しない階層化の問題を引き起こす可能性があります。

IE7 の Z-Index の問題は何ですか?

IE7 では、z -index プロパティは、同じスタック コンテキスト内の要素に相対的です。ただし、ほとんどのブラウザとは異なり、IE7 は、z-index 値を明示的に設定せずに、位置決めされた要素に対して新しいスタッキング コンテキストを作成します。これは、異なるスタッキング コンテキストに属している場合、z インデックスが低い要素が z インデックスが高い要素と重なる可能性があることを意味します。

実践例

次の HTML および CSS コードの例を考えてみましょう。

Input #1:

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

この例では、最初のエンベロープのメニュー (

要素) を 2 番目のエンベロープに重ねます。ただし、IE7 では、 の位置が 2 番目のエンベロープでメニューと重なってしまいます。明示的な z-index を使用しないと、新しいスタッキング コンテキストが作成されます。

考えられる解決策

この問題に対処するには、主に 2 つのアプローチがあります:

1. 明示的な Z インデックスを親に追加する要素:

   • これにより、親要素のすべての子 (メニューを含む) が親要素のすべての兄弟と強制的に重複します。この例では、次の CSS で問題が解決されます:

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

2. 親要素から location:relative を削除します:

   • 可能であれば、親要素 ( ) から location:relative プロパティを削除します。この例では)、新しいスタッキング コンテキストの作成を回避します。こうすることで、メニューが 2 番目のエンベロープに自然に重なり合います。変更された HTML コードは次のようになります:

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

以上がInternet Explorer 7 で Z-Index の動作が異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。