Internet Explorerのz-indexのバグ？

Question

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

Answer 1

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

このような場合、Zインデックスは失われた原因です。

それ以外のブラウザのバージョンを使用していて、絶対的な位置情報を使用していますか？

Answer 2

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

<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インデックスを設定すると、そのことになって戻ってするのではなく、フォアグラウンドに移動だろうということです。私は偶然、完全に解決策を見つけました：私は親の外側に前景要素（id = 3）のコピーを作成しました。

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

私は2つの要素と同じものを共有し、私のHTMLを無効に悩まされないように、私の元のコードの要素がIDを持っていないことを言及するその価値。

私は、この奇妙さを元のものに役立つ別のバグとして分類するのは安全だと思いますが、それは少なくとも私のためには機能します。誰かがこれが役に立つと願っています。

Answer 3

IE8以下を使用している場合、CSS3フィルタはサポートされていません。これは私の問題でした。

私が使用していなかった

：

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

をどんなにそれがその層を完全にマスクを引き起こして（代わりのから行っていたので、あなたが他の層を見ることができなかった、と私は私の位置やZインデックスを設定したもの黒くクリアし、もう一度クリアする）。

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

これは、同じ問題に遭遇している人に役立ちます。

Answer 4

追加したい要素の透明な背景イメージを作成してから、上に置きます。私にとっては、それは最終的に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); 
    } 
    } 

Answer 5

は見えるが、私は多くの繰り返しの相対位置のdivは、絶対位置のdivの表示をブロックしたHTMLで同じ問題を抱えていた

.myLinkCssClass { 
    background   : url(#); 
} 

Answer 6

ないです。この場合、すでに成功して使用していたwww.brenelz.comの回避策は機能していませんでした。だから私のために働いた： 私は最初に言及したそれらのdivから相対的な位置を削除し、その後、ホバリング時に相対的にそれらのdivsを有効にするためにCSSを追加しました。後

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

：：前

：私はあなたのコード見せしましょう

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

この方法で他の人の姉妹の正常な位置でそのdiv要素の滞在をして干渉しませんレイアウト。 それは私のために非常にうまくいった！それがあなたにも役立つことを願っています。