一度この記事は、 ‘Squish the Internet Explorer Z-Index Bug “を翻訳したものである。 ところで文翻訳に入る前に、参考にことが一つあって引用して開始します。

IE And The z-index Property

もしIE6やIE7で位置指定された構成要素にz-indexを使用する場合は、インデックススタッキング[‘stacking index’、すなわち、z-indexの値 - 녹풍(綠風)]は0に設定される。 これは、 レンダリングエラーを誘発する。 bakerという人が言った解決策は、親要素の[子要素よりも - 녹풍(綠風)]より高いz-indexを与えるものである。 どのような場合には、親要素がposition：relativeに割り当てる必要がありかもしれない。

上の段落は、 “IE6のカンニングペーパー：IE6のバグ25 +解決する方法” （ 原文 ）から引用したものである。

z-indexの理解が少しあるのがいいだろう、最近私が翻訳した‘z-indexについて誰も教えてくれなかったこと” （ 原文 ）を参照すると便利だ。

それでは、 “Internet Explorerのz-indexのバグポ皆既 ‘（Squish the Internet Explorer Z-Index Bug）翻訳開始である。

問題

最近のウェブサイトを作っていたある日だった。 IEのチェックを試みるまで、すべてが順調だった。 通常は、IE7でもよく戻る。 ところが、この場合には致命的な問題があった。 absoluteポジションを与えたdivを浮かべたのがあった（hoverメニュー）、その下には透過PNGを使用して、やはりabsoluteに打ち込んでおいた画像があった。 これ以下のように見えた。

IE z-index 버그

解決策

absoluteを与えたdivのz-indexの値は1000であった。 しかし、 @ jorenrapiniがIEのz-indexを正しく使用していないと指摘した。 私は欠陥を詳細に説明しているqurksmode.orgのこの記事を偶然に発見した。

Internet Explorerのpositionの値を持つ要素は、新しいサトイムコンテキスト（stacking context）を作成するときにz-indexを0にする。 このため、z-indexはもう正常に機能しない。

上の文は、対策をすぐに含んでいるわけではありませんが、このような問題を経験した人がコメントを残した。

親要素より高いz-indexの値を与えると、バグが修正される。

[親 - 子の関係で子要素を持つz-indexの値よりも高いz-indexを親に与えなさいという話だ。 - 녹풍(綠風)]

これは、サイトに次のコードを適用した。

<div style="position: relative; z-index: 3000">
  <div style="position:absolute;z-index:1000;">
    <a href="#">Page</a>
    ...
  </div>
</div>
<img style="position:absolute" src="myimage.png" />

そのようにしたらこのような結果が出た。

IE z-index bug fix

なぜ解決したのかは聞かないでください。 どうかして解決された。

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。