[翻訳] Internet Explorer(IE)z-indexのバグを理解する
一度この記事は、 ‘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に打ち込んでおいた画像があった。 これ以下のように見えた。
解決策
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" />
そのようにしたらこのような結果が出た。
なぜ解決したのかは聞かないでください。 どうかして解決された。
- コメント機能はありません。コメントの代わりに[email protected]
にメールを送ってください。