web-dev-qa-db-ja.com

Internet ExplorerのZ-indexバグ？

Internet Explorerで相対的に配置されている別の要素の上に要素をどのように重ねますか？ Z-indexは機能しません。常に相対的に配置された要素の後ろに表示されます。

cssinternet-explorerhtmlz-index
20
Paul

私はからかっているように見えますが、私はそうではありません

.myLinkCssClass {
    background          : url(#);
}
17
MagicSux

あなたは、コンボボックス（タグを選択）、iframe、またはFlashムービーに何かを配置しようとしているのではありませんか？

そのような場合、Z-indexは失われた原因です。

それ以外の場合、使用しているブラウザのバージョンと、絶対配置を使用していますか？

2
Zyphrax

私はこの特定の回避策が関連していないこの問題に本当に苦しみました。説明が少し難しいので、コードを使用してみます。

<div id="first" style="z-index: 2">In between</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>

問題は、親のz-indexをより高い値に設定すると、本来の位置ではなく、前景に移動することです。私は完全に偶然に解決策を見つけました：親の外に前景要素（id = third）のコピーを作成しました。

<div id="first" style="z-index: 2">In between</div>
<div id="third" style="z-index: 3; visibility:hidden">Foreground</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>

元のコードでは要素にIDがないので、2つの要素が同じ要素を共有してHTMLが無効になることはありません。

この奇妙さを元のバグを助ける別のバグとして分類することは安全だと思いますが、少なくとも私にとっては機能します。誰かがこれが便利だと思ってください！

1
Omri

上に配置する要素に追加の透明な背景画像を作成して設定します。私にとっては、IE8でようやく機能しました。 SASS：

  #galerie-link {
    position: absolute;
    z-index: 1000;
    top: 25px;
    left: 40px;
    a {
      display: block;
      width: 185px;
      height: 90px;
      background-image: url(../images/transparent.png);
    }
  }
0
leymannx

HTMLで同じ問題が発生しましたが、相対配置されたdivの繰り返しが絶対配置されたdivのビューをブロックしていました。 www.brenelz.comで提供されている回避策は、この場合はうまくいきませんでした。したがって、次のように機能しました。最初に説明したdivから相対配置を削除し、CSSを追加して、ホバーしたときに相対divをオンにします。コードを紹介しましょう：

前：

DivThatYouMustHover {
height: 300px;
position: relative;
width: 200px;
}

後：

DivThatYouMustHover {
height: 300px;
width: 200px;
}
DivThatYouMustHover:hover {
position:relative;
}

このようにして、そのdivの他の「姉妹」は通常の位置にとどまり、レイアウトに干渉しません。それは私にとって非常にうまくいきました！参考になれば幸いです。

0
Pedro Alvares

IE8以前を使用している場合、CSS3フィルターはサポートされないことに注意してください。これは私の問題でした。

私が使用していた：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@black00', endColorstr='@black00', GradientType=0);

位置やz-indexを何に設定しても、他のレイヤーは見えませんでした。それは、そのレイヤーの上に完全なマスクが発生したためです（クリアからブラックになり、再びクリアするのではなく）。

IE8のみのCSS3フィルターを削除することで、問題を解決することができました。

これが同じ問題に遭遇した人に役立つことを願っています。

0
Termato