Internet Explorer 7 で Z-Index の動作が異なるのはなぜですか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-12-17 18:33:14

オリジナル

554 人が閲覧しました

Why Does Z-Index Behavior Differ in Internet Explorer 7?

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

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

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

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

実践例

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

<form>
  <label>Input #1:</label>
  <span>

ログイン後にコピー

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 番目のエンベロープでメニューと重なってしまいます。明示的な z-index を使用しないと、新しいスタッキングコンテキストが作成されます。

考えられる解決策

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

明示的な Z インデックスを親に追加する要素:
- これにより、親要素のすべての子 (メニューを含む) が親要素のすべての兄弟と強制的に重複します。この例では、次の CSS で問題が解決されます:
```
#envelope-1 {
    position: relative;
    z-index: 1;
}
```
ログイン後にコピー
親要素から location:relative を削除します:
- 可能であれば、親要素 (
  ) から location:relative プロパティを削除します。この例では)、新しいスタッキングコンテキストの作成を回避します。こうすることで、メニューが 2 番目のエンベロープに自然に重なり合います。変更された HTML コードは次のようになります:
```
<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>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>
```
  ログイン後にコピー
  以上がInternet Explorer 7 で Z-Index の動作が異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。